CSS Layout - mixing absolute and floated positioning

I have this basic CSS layout:

CSS

Left Column

Box runs down the length of the page on the left side.

width:16.5%, position:absolute; top:20px; left:1.5%;

It contains two interior boxes, full width, floated left one beneath the other.

Main Body (Right Column)

This is not floated:

width: 82%;
margin-left: 18%;

Rationale

I use a lot of floated-div layouts in the main body that regularly require clearfix elements like <div style="clear:both"></div> (styles shown inline for开发者_如何转开发 ease).

These clearfix elements messed with my original floated Left Column, so I responded by making the left column absolute. This way, I can clear however I need to for prime layout in the main body.

Problem

Left Column + Main Body are contained in a wrapper with a visible background.

When the number of items in Left Column get big, left column grows and can stretch below the wrapper. I need to stop this from happening.

Fundamentally, could I go back to a float:left Left Column in a way that allows my clearfixes to work for the floated stuff within?

---

It's hard to say without code but here is some rationale.. It's bad choice to use absolute position for left column just because your clear-fixes won't work (probably you are not doing it right). Left column, as having absolute position, is not really contained in that wrapper (it's taken out from render flow), and that's why it goes over it. You can use little JavaScript to expand that wrapper as left column gets bigger.. Or if this is not convenient you should try to make it work with float left.

---

Try adding to your left column:

position:absolute;
top:0px;
bottom: 0px;

And make sure your main body element has position:relative, or some other position attribute.

This should make the left column stretch to fit the height of the parent element (as long as it is positioned too, position:relative make that easy.

I just discovered this technique and haven't tried it yet, but it makes sense and I bet it would work.