Question

Does anyone have any idea if there is anything planned in the html5 or CSS3 spec regarding the floating of elements.

I titled this question “soft floating” as I’m interested in the idea of giving a group of elements css properties something like the following…

imagine if you will a styled list of images…

<ul>
<li><img src='1.jpg'></li>
<li><img src='2.jpg'></li>
<li><img src='3.jpg'></li>
<li><img src='4.jpg'></li>
<li><img src='5.jpg'></li>
<li><img src='6.jpg'></li>
<li><img src='7.jpg'></li>
<li><img src='8.jpg'></li>
<li><img src='9.jpg'></li>
</ul>

and styled with:-

ul{
list-style:none;
}
li{
float:left;
}

imagine the images are of fairly random heights, say between 50 and 100 pixels high.

Currently floating these left might result in one or more of the images snagging, resulting in the rest of the floats also being out of place ( visually, but not actually wrong as far as browser rendering is concerned).

I’m wondering if there might be any kind of proposal or attribute for some kind of “soft floating” whereby elements pushed out by the right hand extent of the floated element(s) container would be effectively carriage returned/cleared past the bottom edge of all preceeding floated elements.

Wow. Does any of that make any sense whatsoever…?

Answer 1

I think I see what you’re on about.

I think your desired layout is already achieved by display: inline-block. See http://jsfiddle.net/pauldwaite/6eh23/

If that’s not what you were going for, then as far as I know, there aren’t any proposals along these lines.

However, I don’t follow the new specs very closely. If there were something like this, I think it would be in one of the following CSS3 modules:

• Template Layout
• Grid Positioning
• Flexible Box Layout

You can browse through the other specs-in-progress on the CSS “Current Work” page:

• http://www.w3.org/Style/CSS/current-work