Question

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 =)

Answer 1

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.