Question

Possible Duplicate:
CSS 2 Column layout: Column height

I am trying to create 2 columns that are even in length. I got it to work to an extend, but would like to know how to limit the size of the outer div to the inside content. This way the outer div re-sizes depend on either columns required length to display all the content within.

Right now my code adds a lot of extra height.

Thanks in advance!

Here is a jsfiddle with my code:

http://jsfiddle.net/Bk77A/

Answer 1

I won’t repeat all of you code, but basically you need a clearfix, then set the container height:auto; position:relative. Also, why do you have soooo much padding and negative margin on your main content? Get rid of it.

<div id="wrapper">
    <div.... innner divisions that are floated>
    </div... end of all inner divs>
    <div class="clearfix></div> (clearing our floats)
</div> (closing our wrapper)

css:

#wrapper {
    height:auto;
    position:relative;
    additional styling
}
.clearfix {
    clear:both;
}