Page 1 of 1

[solved] CSS auto clear floats

Posted: Tue Sep 20, 2011 5:19 pm
by pickle
Hi everyone,

I've got a page with a random number of floated divs, the dimensions of which are very similar but not exact (therein lies the problem). I've got a fluid design, so each row of divs holds as many as it can, then the next div pops down onto the next "row" and continues. The problem is if I've got one div that's taller than the rest, the next row gets caught up on it like:
happening.png
happening.png (414 Bytes) Viewed 3547 times
What I want is for the next row to clear all the floats like so:
desired.png
desired.png (538 Bytes) Viewed 3547 times
This could easily be done with a static width layout, but since I'm going fluid, I can't just put in a clearing break.

Any ideas?

Re: CSS auto clear floats

Posted: Tue Sep 20, 2011 5:32 pm
by califdon
Might it help to style all the DIVs with a min-height? Just a thought.

Re: CSS auto clear floats

Posted: Tue Sep 20, 2011 5:35 pm
by pickle
No. I've set a height for the divs, the problem is when some of the divs expand taller than that - due to text length that is unchangeable.

Re: CSS auto clear floats

Posted: Tue Sep 20, 2011 6:03 pm
by califdon
I was thinking that if you could anticipate the maximum content and set a min-height for all divs, it might help, but that would depend on knowing the maximum, and it wouldn't look so nice if there's only one overflow div in 3 or 4 rows, so it's probably not a good idea. Sorry.

Re: CSS auto clear floats

Posted: Wed Sep 21, 2011 9:41 am
by pickle
I don't think there's any way to anticipate the height, but I have made a Javascript shim (for lack of a better term), that finds the tallest div, then sets the height of all of them to that height.

Re: CSS auto clear floats

Posted: Wed Sep 21, 2011 11:51 am
by califdon
I was thinking of doing just that, but I hadn't thought it through enough. (Distraction: there, in one sentence, I used 3 words containing "ough" and each of them is pronounced differently! English is a crazy language!)

Re: CSS auto clear floats

Posted: Thu Sep 22, 2011 6:12 pm
by Weirdan
just set those blocks to 'display:inline-block': http://jsfiddle.net/pA4X4/1/

Re: CSS auto clear floats

Posted: Fri Sep 23, 2011 10:29 am
by pickle
Well that was easy. Thanks a bunch.

Re: [solved] CSS auto clear floats

Posted: Fri Sep 23, 2011 2:41 pm
by califdon
Ooh, Yeaaah! Nice one, Weirdan!