Can't get 2-column layout to work properly

1

I am trying to get a “wrapper” div with a border to dynamically expand vertically to fit the content in both a floated and an absolutely-positioned child-div.

If you view the html file, you can see that the wrapper div (“wrapper”) expands to fit the floated div (“dashboard”), but not the absolutely positioned one (“content”). I have tried floating “content” but it just pops underneath the dashboard. I’ve tried clearing the floats, but that doesn’t seem to work, or I’m doing it wrong.

The left column (“dashboard”) needs to be fixed-width, and the right column (“content”) needs to expand to fill the remaining space.

Code is below. I stripped out everything extraneous, so it should be fairly clear.

This only needs to work in IE 7 & Firefox.

Thanks in advance…

Jerome

CSS:

#wrapper {
width: 90%;
position: absolute;
left: 50%;
margin-left: -45%;
margin-bottom: 6px;
min-width: 1084px;
border: solid #ccc 1px;
}

#header {
position: relative;
left: 6px;
top: 6px;
height: 98px;
}

#dashboard {
float: left;
width: 248px;
margin-left: 6px;
margin-bottom: 6px;
border-style: solid;
border-color: #B3B3B3;
background-color: #EDEDED;
border-width: 1px;
}

#content {
position: absolute;
display: block;
top: 98px;
left: 261px;
width: auto;
padding-bottom: 6px;
padding-right: 6px;
}

table#table1 {
position: relative;
width: 100%;
color: #000;
border: solid 1px #666;
}

HTML:

<div id=“wrapper”>

&lt;div id="header"&gt;TEST&lt;/div&gt;

&lt;div id="dashboard"&gt;
    &lt;p&gt;TEST&lt;/p&gt;
    &lt;p&gt;TEST&lt;/p&gt;
    &lt;p&gt;TEST&lt;/p&gt;
&lt;/div&gt;

&lt;div style="clear:both"&gt;

&lt;div id="content"&gt;
    &lt;table id="table1"&gt;
        &lt;tr&gt;
            &lt;td&gt;
    &lt;p&gt;TEST&lt;/p&gt;
    &lt;p&gt;TEST&lt;/p&gt;
    &lt;p&gt;TEST&lt;/p&gt;
    &lt;p&gt;TEST&lt;/p&gt;
    &lt;p&gt;TEST&lt;/p&gt;
    &lt;p&gt;TEST&lt;/p&gt;
    &lt;p&gt;TEST&lt;/p&gt;
    &lt;p&gt;TEST&lt;/p&gt;
    &lt;p&gt;TEST&lt;/p&gt;
    &lt;p&gt;TEST&lt;/p&gt;
    &lt;p&gt;TEST&lt;/p&gt;
    &lt;p&gt;TEST&lt;/p&gt;
    &lt;p&gt;TEST&lt;/p&gt;
    &lt;p&gt;TEST&lt;/p&gt;
    &lt;p&gt;TEST&lt;/p&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;
&lt;/div&gt;

&lt;div style="clear:both"&gt;

</div>