Clearing floats in liquid layouts

[NeoDreamer]

I'm having trouble clearing floats when the whole site is a liquid layout. The simple liquid layout works as follows: a blue left side navigation and a green right side which fills up the rest of the browser space. The green right side holds all of the main content.

In this case I have a bunch of beige boxes, which are floated left. I will have no idea of how many of these boxes actually show up. If I insert a clear:left right after these boxes, this will happen:

http://joanna-levesque.org/v3/clear.html
http://img45.imageshack.us/img45/5924/realnk0.gif

It's clearing the left navigation, which is longer than the boxes. What I really want is the clear to ignore the left navigation and only clear the float:lefts in the green main content area. Is it possible?

http://img365.imageshack.us/img365/3923/wanttp2.gif

[fasterthanlight™]

I had the same problem with a little help utility i was building for work,

I had to remove the cleared div (red) from the container (green) and use the same float + wide margin trick i used to get the main container (green) to float next to the sidebar (blue)

This is probably not what YOU can do if you need your cleared div (red) to still be inside of your container (green)
but it should at least get your brain thinking in the right direction..

if i were you I would treat each element within your green container as little containers themselves, so instead of having one wrapper container, you will have several mini-containers for each element of content you need to present

[NeoDreamer]

I can't have sub-wrappers with pre-determined heights within the green DIV because the number of beige boxes is variable.

[fasterthanlight™]

you don't need to define a height

and they wouldnt be sub-wrappers,

they'd be on the same "root" as your green wrapper now, replacing it

[NeoDreamer]

I don't know what chu talkin' bout, Willis.

I need that green thing. It has a background. I can't just replace it.

And if you put floats in a wrapper without a defined height, then it will not grow as you put more floating boxes in it.

[fasterthanlight™]

Hrmmm, i see, i see. its a vicious cycle, ain't it,

can't clear the float to give you a height, can't define a height because of dynamic content....

*will do some more pondering*

[simplistik]

link ... you post tons of css issues you should know this by now :P

[NeoDreamer]

Here's the link: http://joanna-levesque.org/v3/clear.html

This is showing what I don't want happening.



* {
margin: 0;
padding: 0;
}

#navigation {
width: 380px;
height: 500px;
background: #cee7ea;
float: left;
border: 1px solid black;
}

#main {
margin: 0 0 0 400px;
background: #d1eace;
border: 1px solid black;
}

.clear {
background: #eebebe;
height: 50px;
clear: left;
border: 1px solid black;
margin: 10px;
}

.box {
margin: 10px;
background: #eae8ce;
width: 100px;
height: 100px;
float: left;
border: 1px solid black;
}

[redelite]

I don't know what chu talkin' bout, Willis.

I need that green thing. It has a background. I can't just replace it.

And if you put floats in a wrapper without a defined height, then it will not grow as you put more floating boxes in it.

You can fix this 'non-growing-floating-issue' by putting the following CSS code on the box that you want to 'grow' (which in your case would be the green one):




#grow_box:after {
clear: both;
content: " ";
display: block;
visibility: hidden;
}
Hope this helps! :thumb2:

[NeoDreamer]

That's going to clear the left navigation, which I don't want.

Should I just PHP it? Kinda ugly and won't work for all screen resolutions:



<div style="height:
<?php
echo $numBoxes / $estimatedBoxesPerScreenWidth;
?>
em;">
// bunch of float lefts - assume height = 1em;
</div>

[redelite]

Man-o-man.. I've been trying to figure this out for a few days, no such luck man. Is it possible for you to change your HTML at all or does it have to be like that? Because there might be a way to get the effect you want with a different render order.. I dunno for sure though.. just a thought! :)

[NeoDreamer]

I could change my HTML, but I still need this typical liquid layout.

It's just so frustrating that I can't clear left floated boxes in the main content div because it would clear the left navigation as well.

[redelite]

Cool, if that's the case (can change HTML) then I'm going to go mess with it a little more and I'll get back to ya! :thumb2: