473,241 Members | 1,611 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,241 software developers and data experts.

problems with inline divs

http://www.frostjedi.com/terra/dev/test.html

I'd like to have the colored boxes appear on the same line as "Test"
does. The div containing the colored boxes is defined as being inline,
yet doesn't seem to be acting as an inline element. I suspect the
floats in the images within the div may be contributing to the problem,
but I don't know what to do about it if that's the case. Any ideas?

Jul 21 '05 #1
10 3789
Els
yawnmoth wrote:
http://www.frostjedi.com/terra/dev/test.html

I'd like to have the colored boxes appear on the same line as "Test"
does. The div containing the colored boxes is defined as being inline,
yet doesn't seem to be acting as an inline element. I suspect the
floats in the images within the div may be contributing to the problem,
Floating elements are block level elements.
Block level elements can't be contained by inline elements.
but I don't know what to do about it if that's the case. Any ideas?


In your code you have the word Test before the floats. I wonder what
your objective is: have the coloured boxes to the right, or to the
left of the text?
If to the left, you should place them before the text.
If you want them to follow the word text directly on the right side,
I'd put 'Text' in a div, and float it left, followed by the coloured
boxes, floated left as well.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Jul 21 '05 #2


Els wrote:
yawnmoth wrote:
http://www.frostjedi.com/terra/dev/test.html

<snip>

If you want them to follow the word text directly on the right side,
I'd put 'Text' in a div, and float it left, followed by the coloured
boxes, floated left as well.


That achieved the desired effect - thanks!

Although now vertical-align doesn't seem to be working. I'd like the
bottom of the "Test" text to have the same vertical position as the
bottom of the multicored div to the right. Any ideas?

Jul 21 '05 #3
Els
yawnmoth wrote:
Els wrote:
yawnmoth wrote:
http://www.frostjedi.com/terra/dev/test.html

<snip>

If you want them to follow the word text directly on the right side,
I'd put 'Text' in a div, and float it left, followed by the coloured
boxes, floated left as well.


That achieved the desired effect - thanks!

Although now vertical-align doesn't seem to be working. I'd like the
bottom of the "Test" text to have the same vertical position as the
bottom of the multicored div to the right. Any ideas?


Not sure - I'm guessing setting vertical-align:bottom; for "Test" will
lower the text to the level of the blocks.

If the coloured boxes are just images: don't float anything, just go
Test <img src=".."><img src=".."><img.... ... >
This will make the images behave like text, hence remain on the same
level. Then set margins on the images to 0 to get them to stick
together.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Jul 21 '05 #4
Els wrote:
yawnmoth wrote:

http://www.frostjedi.com/terra/dev/test.html

I'd like to have the colored boxes appear on the same line as "Test"
does. The div containing the colored boxes is defined as being inline,
yet doesn't seem to be acting as an inline element. I suspect the
floats in the images within the div may be contributing to the problem,

Floating elements are block level elements.
Block level elements can't be contained by inline elements.


Is that stated in the CSS spec? As far as HTML is concerned, what can
and can't be included inside a particular element is determined entirely
by the element tag name, without regard to any CSS display value being
applied to the element.
Jul 21 '05 #5


Els wrote:
yawnmoth wrote:
Els wrote:
yawnmoth wrote:

http://www.frostjedi.com/terra/dev/test.html
<snip>

Not sure - I'm guessing setting vertical-align:bottom; for "Test" will
lower the text to the level of the blocks.


That doesn't seem to work :(

Doing some reading on the subject suggests that vertical-align only
works on inline elements. Taking that into consideration, I tried
setting display to inline. I also created a span within the "Text" div
and added vertical-display to that. Neither worked...
If the coloured boxes are just images: don't float anything, just go
Test <img src=".."><img src=".."><img.... ... >
This will make the images behave like text, hence remain on the same
level. Then set margins on the images to 0 to get them to stick
together.


The above URL has had a "normal" div added that uses this method, and
it doesn't seem to work... any ideas as to why?

All that said, I appreciate your help thus far! :)

Jul 21 '05 #6
yawnmoth wrote:
>http://www.frostjedi.com/terra/dev/test.html


That doesn't seem to work :(


There is no problem with any block inside inline in your example,
although display:inline; is superfluous.

The problems that you are encountering is that you have the div width
set to 30px which will only contain 3 of your images, resulting in three
lines of them.

In your newest version, change the div width to 90px for both sections.
The first section/method will be ok.
For the second section/method also remove the two clear:left; for the
first two groups of four images and apply a margin-top:5px; to the div
in order to move the single row of images down as desired.
The second section/method will also be ok.

--
Gus
Jul 21 '05 #7
Harlan Messinger wrote:
Els wrote:
yawnmoth wrote:

http://www.frostjedi.com/terra/dev/test.html

I'd like to have the colored boxes appear on the same line as "Test"
does. The div containing the colored boxes is defined as being inline,
yet doesn't seem to be acting as an inline element. I suspect the
floats in the images within the div may be contributing to the problem,


Floating elements are block level elements. Block level elements can't
be contained by inline elements.

Is that stated in the CSS spec? As far as HTML is concerned, what can
and can't be included inside a particular element is determined entirely
by the element tag name, without regard to any CSS display value being
applied to the element.


The two statements are correct:
"Floating elements are block level elements."
"Block level elements can't be contained by inline elements."
The first statement is from the CSS specs.
The second statement is from the HTML specs.
The second sentence/statement has no relevence in this example since it
does not apply here.

It was clarified for me a several weeks ago in this newsgroup (was
actually like pulling teeth) that the display value does not change the
inherent block or inline state of an element. What it does do, is to
only change the way that it is displayed.

The first statement is therefore misleading and should really, read:
"Floating elements are 'displayed' as block level elements."
For example, an image is an inline element, but when floated it is
displayed as a block, however it will always remain an inline element.

Incorporating the second statement, consider four elements;
span and img which are inline elements, and
div and p which are block elements
You may have span and/or img, whether display:block is set or not,
within a div or p, whether display:inline is set or not.
You may _not_ have a div or p, whether display:inline is set or not,
within a span, whether display:block is set or not.

--
Gus
Jul 21 '05 #8

Gus Richter wrote:
yawnmoth wrote:
>>http://www.frostjedi.com/terra/dev/test.html


That doesn't seem to work :(


There is no problem with any block inside inline in your example,
although display:inline; is superfluous.

The problems that you are encountering is that you have the div width
set to 30px which will only contain 3 of your images, resulting in three
lines of them.

In your newest version, change the div width to 90px for both sections.
The first section/method will be ok.
For the second section/method also remove the two clear:left; for the
first two groups of four images and apply a margin-top:5px; to the div
in order to move the single row of images down as desired.
The second section/method will also be ok.


Correct me if I'm wrong, but wouln't those suggestions leave me with
one row as opposed to three? I'd like to be able to have the "Test"
text display on the bottom, while, at the same time, having three rows,
and the total width being 30px...

Jul 21 '05 #9
yawnmoth wrote:
Gus Richter wrote:
yawnmoth wrote:
>>>http://www.frostjedi.com/terra/dev/test.html

That doesn't seem to work :(
There is no problem with any block inside inline in your example,
although display:inline; is superfluous.

The problems that you are encountering is that you have the div width
set to 30px which will only contain 3 of your images, resulting in three
lines of them.

In your newest version, change the div width to 90px for both sections.
The first section/method will be ok.
For the second section/method also remove the two clear:left; for the
first two groups of four images and apply a margin-top:5px; to the div
in order to move the single row of images down as desired.
The second section/method will also be ok.

Correct me if I'm wrong, but wouln't those suggestions leave me with
one row as opposed to three?


That is correct. That was what I thought you wanted. My
misunderstanding. Sorry.
I'd like to be able to have the "Test"
text display on the bottom, while, at the same time, having three rows,
and the total width being 30px...


Subsequent boxes floated after the initially floated box will
automatically align to the top of the initially floated box.
So, for your example, apply negative margin to the div, next to the text
and containing the images.
Text-align and display won't help there.

--
Gus
Jul 21 '05 #10
Gus Richter wrote:
yawnmoth wrote:
Gus Richter wrote:
yawnmoth wrote:

>>>> http://www.frostjedi.com/terra/dev/test.html
That doesn't seem to work :(
There is no problem with any block inside inline in your example,
although display:inline; is superfluous.

The problems that you are encountering is that you have the div width
set to 30px which will only contain 3 of your images, resulting in three
lines of them.

In your newest version, change the div width to 90px for both sections.
The first section/method will be ok.
For the second section/method also remove the two clear:left; for the
first two groups of four images and apply a margin-top:5px; to the div
in order to move the single row of images down as desired.
The second section/method will also be ok.


Correct me if I'm wrong, but wouln't those suggestions leave me with
one row as opposed to three?

That is correct. That was what I thought you wanted. My
misunderstanding. Sorry.
I'd like to be able to have the "Test"
text display on the bottom, while, at the same time, having three rows,
and the total width being 30px...

Subsequent boxes floated after the initially floated box will
automatically align to the top of the initially floated box.
So, for your example, apply negative margin to the div, next to the text
and containing the images.
Text-align and display won't help there.


That should be negative *top* margin.

--
Gus
Jul 21 '05 #11

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: nina | last post by:
Hi all, I've been working on a site that involves content in multiple scrolling DIVs on a page which is loaded inside multiple framesets. the layout is cramped as all hell but I'm not going to...
30
by: Adam Siler | last post by:
i want to display a series of inline, fixed-width DIVs that will wrap into columns - a table, basically. i can do it under Internet Explorer, but the same code under Netscape or Opera does not...
3
by: Aaron | last post by:
Hi, I'm trying to use style sheets instead of tables for layout, but I'm not sure on how to do something... I have a div (100% width) containing 3 other divs. Each needs to be lined up next to...
4
by: txican | last post by:
the HTML is: ---------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <html> <head> <title>foo</title>...
7
by: massic80 | last post by:
Hi everybody! I'm making a page for an exam at uni. In two DIV blocks of it there should appear (and disappear) some "icons", due to XML messages, so I dunno how many of them should I can obtain;...
2
by: Steve Richter | last post by:
I would like to use display:inline and other CSS attributes to build an entry form. Where the heading to the left of the text box is always a set width. It is not working so I am experimenting...
6
by: Liam Gibbs | last post by:
Hello everyone, I'm trying to program a church web site and I'm having a number of problems with the layout. The html is at http://www.altmarvel.net/Liam/index.html and the css is at...
2
by: Liam Gibbs | last post by:
Hello everyone, This will be my third time posting this, but for some reason, my message isn't get through to the newsgroup, even after hours of waiting. So here goes again. I'm having huge...
2
Niheel
by: Niheel | last post by:
To speed up developing i am using a lot of inline code vs stylesheets. Mainly using the style= attribute in divs, spans, and p. Is this the best way to do 3 column inline? or is there an easier...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, youll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.