How to make a floated element take the entire width of its parent

Question

Please see the figure below.

I have a div (bounding box) which contains two floated divs inside both of which are floated left. How can I make the second floated div (the red one) extend its width to all the available space inside the bounding box.

Right now, I am doing with javascript but isn't there a solution for this in CSS?

Edit:

Here is how my HTML is structured

<div id='container'>
    <div id='side'>
    </div>
    <div id='main'>
    </div>
</div>

My CSS is more or less like the following

#container {
     width: 100%;
     position: relative
     overflow: hidden;
}

#side {
     width: 200px;
}

#main, #side {
     float: left;
}

and then I set the #main's width using jquery

$('#main').width($("#container").width() - $("#sideview-sidebar").width());

Please note I am trying to avoid JS.

Answer 1

Float #left

#left {
  float: left;
  width: 200px; /* eg. */
}

Set margin for the #main , and don't make it float.

#main {
  margin-left: 200px;
}

If you want to have more flexibility, add another div in #main , and set its padding/margin.

Answer 2

The solution above with percent is the best. About your padding/margin, you just have to set them in percent as well. Then it could be for exemple:

#side
{
   width:12%; padding:0 2%; margin:2%;
}
#main
{
   width:78%; margin-right:2%
}