[solved] CSS auto clear floats
Moderator: General Moderators
[solved] CSS auto clear floats
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: What I want is for the next row to clear all the floats like so: 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?
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: What I want is for the next row to clear all the floats like so: 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?
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Re: CSS auto clear floats
Might it help to style all the DIVs with a min-height? Just a thought.
Re: CSS auto clear floats
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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Re: CSS auto clear floats
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
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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Re: CSS auto clear floats
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
just set those blocks to 'display:inline-block': http://jsfiddle.net/pA4X4/1/
Re: CSS auto clear floats
Well that was easy. Thanks a bunch.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Re: [solved] CSS auto clear floats
Ooh, Yeaaah! Nice one, Weirdan!