sidebar + 2 expanding content divs

Sorry if this is a duplicate; specific design questions are difficult to locate...

<div id="sidebar"></div>
<div id="top-expand"></div>
<div id="bottom-expand"></div>

The sidebar has a fixed width of 200px; the other 2 divs each have a fixed height and it would be ideal if I could get them to stretch with the width of the window.

 ------------------------------------- 
|       |                             |  
|       |        top-expand           |
|sidebar|-----------------------------|
|       |                             |
|       |       bottom-expand         |
 -------------------------------------

sidebar: fixed width;

top-expand: fixed height; bottom-expand: fixed height;

is it possible to have sidebar stay fixed width and stack the other two divs beside it with just CSS? I'm not averse to using jQuery to handle window calculations, but it would be nice to have a开发者_运维技巧 native css/html representation of this part

thanks for your suggestions =)

This works for me in Chrome.

#sidebar{
    border:1px solid red;
    width:200px;
    height:400px;
    float:left;
}

#top-expand{
    border:1px solid blue;
    height:200px;
    margin-left:200px;  
}

#bottom-expand{
    border:1px solid green;
    height:200px;
    margin-left:200px;
}

http://jsfiddle.net/jasongennaro/Y6dNt/

Borders for display only.

Yes, it is possible. Wrap it all in a <div> with position: relative, absolutely position the sidebar, and give the other two <div>s a left margin that matches the sidebar's width.

For example:

<div id="outer">
    <div id="sidebar">pancakes</div>
    <div id="top-expand"></div>
    <div id="bottom-expand"></div>
</div>

CSS:

#outer {
    position: relative;
}
#sidebar {
    width: 100px;
    position: absolute;
    top: 0;
    left: 0;
    background: #00f;
}
#top-expand {
    height: 100px;
    margin-left: 100px; /* Matches the #sidebar width */
    background: #0f0;
}
#bottom-expand {
    height: 100px;
    margin-left: 100px; /* Matches the #sidebar width */
    background: #f00;
}

Live example: http://jsfiddle.net/ambiguous/kRs54/1/

I'm using background colors to differentiate the blocks and smaller sizes to fit nicely in the jsfiddle results area.

Block elements, such as <div>, consume all the available width less their margins unless you specify otherwise so you just give your #top-expand and #bottom-expand elements a large enough left margin to accomadata #sidebar. The left margin also keeps the right-side blocks in the right place when they're taller than the sidebar.