CSS vertical float

HTML & CSS
1

http://andypbrowne.com/work/delicious_feed/index.php

Test page linked above. These items are all the same width, but will vary in height as the data changes. I have seen some examples of this: http://www.ted.com/talks/browse (accomplished with flash), or notably flipboard ipad application.

How do we make the list items float in vertically and still read from left to right? Hopefully it does not require any custom javascript.

2

The easiest way prob would be to just wrap each three floats in a div with overflow hidden (and overflow visible and height 1% for IE6). Alternatively you could clear left the last one in each row. I’ve had that not work in ie6 for me before though for whatever reason.

3

Don;t float them just use display:inline-block and then they won’t snag (if that’s what you meant :)).



.link {
    /*float:left;*/
    [B]display:inline-block;[/B]
    width:280px;
    margin:0 30px 0 0;
    padding:20px 0 10px 0;
    border-bottom:1px dashed #666666;
[B]vertical-align:top;[/B]/* or bottom if you prefer*/
}
* html .link{display:inline}/* ie6*/
*+html .link{display:inline}/* ie7*/

IE6 and 7 don’t natively understand inline-block but the hack above accomplishes it because IE6 and 7 treat any inline element in haslayout mode as being inline-block.

4

Thank you! This is very close to what I wanted. And I defiantly appreciate fixing the problem with one line of CSS.