CSS Layout Question

Question

I'm having trouble defining the CSS styles necessary in order to achieve the following layout:

Ideally, I'd like to have the left two divs be of width 200px. div#image will always have a height of 100px. However, I would like div#sidebar and div#mainContent to have lower borders which lie on the same horizontal level. Their sizes should be large enough to contain their respective content, which is determined when the page is being served. Hence, the one with more content will cause the other div to extend down to the same distance.

The problem is that with absolute positioning, the div#sidebar and div#mainContent elements don't seem to acknowledge the flow of their child elements. Perhaps I don't fully understand absolute positioning. Also, it seems like bad form to use Javascript in order to set the inline style of elements on the page. Is there a way of accomplishing this solely with CSS?

I've also tried floating the div#image and div#sidebar, and setting a margin-left property on div#mainContent, but wasn't able to get it to work...

Any help will be much appreciated!

Andrew

Answer 1

demo: http://jsfiddle.net/TRa35/

html

<div id="wrapper">
    <div id="div-image">div image</div>
    <div id="div-maincontent">
        <div id="div-sidebar">
            div sidebar
        </div>
        div maincontent
        <button>click to add content</button>
        <br />
        <span></span>
    </div>
</div>

css

html, body {
    margin:0;
    padding:0; 
}

#wrapper {
    position:relative;
}

#div-image {
    position:absolute;
    left:0;
    top:0;
    width:200px;
    height:100px;
    background-color:#cef;
}

#div-sidebar {
    position:absolute;
    left:-200px;
    top:100px;
    bottom:0;
    width:200px;
    background-color:#efc;
}

#div-maincontent {
    position:absolute;
    left:200px;
    right:0;
    top:0;
    background-color:#fce;
    min-height:300px;
}