# Clearing floats in liquid layouts
**URL:** https://forum.kirupa.com/t/clearing-floats-in-liquid-layouts/261765
**Category:** web dev
**Created:** [May 30, 2008, 5:17pm UTC](https://forum.kirupa.com/t/clearing-floats-in-liquid-layouts/261765 "2008-05-30T17:17:47Z")
**Posts on this page:** 13
**Page:** 1
### Author:  [@NeoDreamer](https://forum.kirupa.com/u/NeoDreamer)
#### Post date: [May 30, 2008, 5:17pm UTC](https://forum.kirupa.com/t/clearing-floats-in-liquid-layouts/261765/1 "2008-05-30T17:17:47Z")
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://joanna-levesque.org/v3/clear.html**)
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?
---
### Author:  [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)
#### Post date: [May 30, 2008, 5:25pm UTC](https://forum.kirupa.com/t/clearing-floats-in-liquid-layouts/261765/2 "2008-05-30T17:25:41Z")
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
---
### Author:  [@NeoDreamer](https://forum.kirupa.com/u/NeoDreamer)
#### Post date: [May 30, 2008, 7:28pm UTC](https://forum.kirupa.com/t/clearing-floats-in-liquid-layouts/261765/3 "2008-05-30T19:28:41Z")
I can’t have sub-wrappers with pre-determined heights within the green DIV because the number of beige boxes is variable.
---
### Author:  [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)
#### Post date: [May 30, 2008, 7:29pm UTC](https://forum.kirupa.com/t/clearing-floats-in-liquid-layouts/261765/4 "2008-05-30T19:29:25Z")
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
---
### Author:  [@NeoDreamer](https://forum.kirupa.com/u/NeoDreamer)
#### Post date: [May 30, 2008, 7:42pm UTC](https://forum.kirupa.com/t/clearing-floats-in-liquid-layouts/261765/5 "2008-05-30T19:42:58Z")
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.
---
### Author:  [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)
#### Post date: [May 30, 2008, 7:46pm UTC](https://forum.kirupa.com/t/clearing-floats-in-liquid-layouts/261765/6 "2008-05-30T19:46:35Z")
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_
---
### Author:  [@simplistik](https://forum.kirupa.com/u/simplistik)
#### Post date: [May 30, 2008, 8:01pm UTC](https://forum.kirupa.com/t/clearing-floats-in-liquid-layouts/261765/7 "2008-05-30T20:01:33Z")
link … you post tons of css issues you should know this by now 😛
---
### Author:  [@NeoDreamer](https://forum.kirupa.com/u/NeoDreamer)
#### Post date: [May 30, 2008, 9:25pm UTC](https://forum.kirupa.com/t/clearing-floats-in-liquid-layouts/261765/8 "2008-05-30T21:25:26Z")
Here’s the link: [U]**[http://joanna-levesque.org/v3/clear.html](http://joanna-levesque.org/v3/clear.html)**[/U]
This is showing what I _don’t_ want happening.
```auto
* {
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;
}
```
---
### Author:  [@redelite](https://forum.kirupa.com/u/redelite)
#### Post date: [June 2, 2008, 3:10pm UTC](https://forum.kirupa.com/t/clearing-floats-in-liquid-layouts/261765/9 "2008-06-02T15:10:44Z")
[quote=NeoDreamer;2333792]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.[/quote]
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):
```auto
#grow_box:after {
clear: both;
content: " ";
display: block;
visibility: hidden;
}
```
Hope this helps! :thumb2:
---
### Author:  [@NeoDreamer](https://forum.kirupa.com/u/NeoDreamer)
#### Post date: [June 17, 2008, 4:57am UTC](https://forum.kirupa.com/t/clearing-floats-in-liquid-layouts/261765/10 "2008-06-17T04:57:53Z")
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:
```php
// bunch of float lefts - assume height = 1em;
```
---
### Author:  [@redelite](https://forum.kirupa.com/u/redelite)
#### Post date: [June 19, 2008, 5:40pm UTC](https://forum.kirupa.com/t/clearing-floats-in-liquid-layouts/261765/11 "2008-06-19T17:40:53Z")
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! 🙂
---
### Author:  [@NeoDreamer](https://forum.kirupa.com/u/NeoDreamer)
#### Post date: [June 19, 2008, 5:49pm UTC](https://forum.kirupa.com/t/clearing-floats-in-liquid-layouts/261765/12 "2008-06-19T17:49:31Z")
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.
---
### Author:  [@redelite](https://forum.kirupa.com/u/redelite)
#### Post date: [June 19, 2008, 6:04pm UTC](https://forum.kirupa.com/t/clearing-floats-in-liquid-layouts/261765/13 "2008-06-19T18:04:39Z")
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: