Geek Answers Handbook

Clearing the last item moved in each row

I have a set of variable height divs that have been moved to the left. When there are too many specified divs in one line, the next div wraps a new line (as it should). The problem I am facing is that the new line starts at the offset position x in the new line, so the div is under the last div in the previous line, which does not have higher divs behind it - quite often leaving a large margin with the left side.

div.entry { float: left; width: 180px; padding: 10px; }

I essentially want the last div.entry in each "line" (the one that wraps with a new line in front of it) to clear the float, so that the next line of floating divs is aligned with the same height, and do not have a sufficiently large gap on the left side. Illustrated in ASCII:

What I expect:

 +-----+ +-----+ +-----+ +-----+ | A | | B | | C | | D | | | | | | | +-----+ +-----+ | | +-----+ +-----+ +-----+ +-----+ +-----+ +-----+ | E | | F | | G | | H | | | | | | | +-----+ +-----+ | | +-----+ +-----+

What is actually going on:

 +-----+ +-----+ +-----+ +-----+ | A | | B | | C | | D | | | | | | | +-----+ +-----+ | | +-----+ +-----+ +-----+ +-----+ | E | | F | | | | | +-----+ | | +-----+ +-----+ +-----+ | G | | H | | | +-----+ +-----+

Michael

+4
source share
3 answers

If float: left is optional, always display: inline-block , which will be more suitable for the job. Because the "embedded stream" already works the way you want.

 .item { display: inline-block; vertical-align: top; width: 300px; }

This pretty much behaves correctly in current browsers. See fiddle .

If you need compatibility with older browsers, there is a good mozilla blog post describing the situation: http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

+1
source

I had this problem once, I think I circumvented it by setting the min-height property in divs.

Who gave me:

 +-----+ +-----+ +-----+ +-----+ | A | | B | | C | | D | | | | | | | +-----+ +-----+ | | +-----+ +-----+ +-----+ +-----+ +-----+ +-----+ | E | | F | | G | | H | | | | | | | +-----+ +-----+ | | +-----+ +-----+
0
source

Another solution (not fully cross browser) is to add

 .item:nth-child(4n+1) { clear: left; }

Check out http://jsfiddle.net/AfUL3/

0
source

More articles:


All Articles