problems with inline divs

yawnmoth

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

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 vão. O resto é imperfeito.
- Renato Russo -

Jul 21 '05 #2

yawnmoth

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 vão. O resto é imperfeito.
- Renato Russo -

Jul 21 '05 #4

Harlan Messinger

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

yawnmoth

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

Gus Richter

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

Gus Richter

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

yawnmoth

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

Gus Richter

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

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