How to apply remaining width to a div aside sidebar having specific width

Question

what I intend to do is following. I have a div#sidebar with specific width on the right. This sidebar div takes up place on the right. What I now want to do is to apply the remaining width to another div#left on the left of sidebar.

But it does not work properly, since the div under the sidebar div. I want the div to be 100% width to the margin of sidebar. Not the whole side. I made an image to explain it better:

Following is the css i currently have:

#sidebar {
   height: 100%;
   width: 342px;
   float:right;
}

#left {
   float: left;
   width: 100%;
   height: 100%;
}

Hope you get my point. Thanks

Answer 1

You can absolutely position the #left content using left:0, right: width of sidebar inside a relative container. So you'll have better browser support...

HTML

<div id='container'>
 <div id='left'></div>
 <div id='sidebar'></div>
</div>

css

html, body {
 height:100%;
}
#container{
 position:relative; 
 height:100%;
}
#left {
 position:absolute;
 left:0;
 right:342px;
 height: 100%;
}
#sidebar {
 width: 342px;
 height: 100%;
 float:right;
}

Demo