Container of floated elements and layout

[Ney André de Mello Zunino]

Hello.

The issue is quite known: you have a block-level container holding a
set of floated elements and you need that the container's content
height take the floated elements' dimensions into consideration. E.g.:

<div class="images">
<div class="image">< img src="example1.p ng" width="160" height="120"
alt=""></div>
<div class="image">< img src="example2.p ng" width="160" height="120"
alt=""></div>
</div>
<p>The contents resume here blah, blah, blah...</p>

CSS definitions:

div.images { margin-bottom: 1em; }
div.image { float: left; width: 160px; margin-right: 2em; }

Because all the elements in the container are floated, their height
will not affect the container's. This will cause the following <p> to
be not laid out as intended, i.e., below the container.

The traditional solution involves the addition of extra markup at the
end of the container, which uses the /clear/ CSS property to suggest
that the respective element be pushed down, past the floats (e.g. <div
style="clear:bo th"></div>). This expands the container's height,
producing the desired result. Although it seems to work, such solution
is at least disturbing, IMHO.

I think there should be a (CSS) way for authors to suggest that
intended behavior without the need of adding extra markup and without
knowledge of the element that follows the container. In other words,
it should be possible to specify, at the container level, that its
contents should affect its calculated dimensions, regardless of their
nature.

Does anybody else share the same, or a similar point of view? Is there
anything else I should know about this matter? Is there a better or
more logical solution, given the CSS implementations at hand?

Thank you,

--
Ney André de Mello Zunino

[Brian]

Ney André de Mello Zunino wrote:

The issue is quite known: you have a block-level container holding a
set of floated elements and you need that the container's content
height take the floated elements' dimensions into consideration. E.g.:

<div class="images">
<div class="image">< img src="example1.p ng" width="160" height="120"
alt=""></div>
<div class="image">< img src="example2.p ng" width="160" height="120"
alt=""></div>
</div>
<p>The contents resume here blah, blah, blah...</p>

CSS definitions:

div.images { margin-bottom: 1em; }
div.image { float: left; width: 160px; margin-right: 2em; }

Because all the elements in the container are floated, their height
will not affect the container's. This will cause the following <p> to
be not laid out as intended, i.e., below the container.

I think there should be a (CSS) way for authors to suggest that
intended behavior without the need of adding extra markup and without
knowledge of the element that follows the container. In other words,
it should be possible to specify, at the container level, that its
contents should affect its calculated dimensions, regardless of their
nature.
The CSS sibling selector would do what you want.

..container + * { clear: both }

but sibling selectors are not recognized by MSIE/Win, possibly others
as well.
Does anybody else share the same, or a similar point of view? Is there
anything else I should know about this matter?
Floats are much trickier than some people believe. They can lead to
all sorts of problems.
Is there a better or
more logical solution, given the CSS implementations at hand?

You could assign an id to the last item, and explicitly not float it,
but that still involves changing the html. Moreover, I tried that
once and vaguely recall other problems as a result of the trick.

--
Brian
follow the directions in my address to email me

[Brian]

Jim Dabell wrote:

I think there should be a (CSS) way for authors to suggest that
intended behavior without the need of adding extra markup and without
knowledge of the element that follows the container. In other words,
it should be possible to specify, at the container level, that its
contents should affect its calculated dimensions, regardless of their
nature.

The CSS sibling selector would do what you want.

No, it wouldn't. It doesn't affect the dimensions of the parent element, it
just makes sure the following element is in the right place. This is
useless in the (extremely) common situation where there is a
border/background that should be applied to the containing element.

I see your point, but I think the op was asking about proper placement
of an element after the floated element. He seemed to be talking
about the difficulty of getting a margin between a box whose height is
0 because its contents are floated, and an element after that box.

--
Brian
follow the directions in my address to email me