[solved] CSS auto clear floats

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

[solved] CSS auto clear floats

Post 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 3545 times
What I want is for the next row to clear all the floats like so:
desired.png
desired.png (538 Bytes) Viewed 3545 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?
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: CSS auto clear floats

Post by califdon »

Might it help to style all the DIVs with a min-height? Just a thought.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: CSS auto clear floats

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: CSS auto clear floats

Post 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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: CSS auto clear floats

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: CSS auto clear floats

Post 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!)
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: CSS auto clear floats

Post by Weirdan »

just set those blocks to 'display:inline-block': http://jsfiddle.net/pA4X4/1/
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: CSS auto clear floats

Post by pickle »

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.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: [solved] CSS auto clear floats

Post by califdon »

Ooh, Yeaaah! Nice one, Weirdan!
Post Reply