[HTML5] Layout Problem: Floating Elements with different heights breaks the flow.

[Simon Pieters]

(Sent to the help mailing list instead.)

On Wed, 21 Feb 2007 18:58:17 +0100, Shlomi Asaf <neoswf at gmail.com> wrote:

> Hi
> i have a "table" like layout.
> here is a live example:  
> http://www.webcssdesign.34sp.com/me/floatingDivs.htm
>
> all the floating divs has the same height. i haven't written the height  
> in
> the css- the content is the same.
> all the titles are one line height.
> but what happens when one title is longer? the layout breaks and the  
> lower
> float element looks for his position in a the next empty space - after  
> the
> high element.

This is because floats weren't actually intended for page layout. The main  
intended use was to float an image to the left or the right and let the  
text flow around the image. See e.g.  
http://dbaron.org/log/2005-12#e20051228a

> how can i solve this problem?

You could use display:table, but IE doesn't support that yet. Otherwise if  
scrollbars are acceptable then you could specify a max-height (in ems) and  
use overflow:auto.

> [...]

-- 
Simon Pieters