Creating a div whose size is relative to a fixed width div and containing area?

Question

I have a containing div (contentBody) that is N% wide. Within that div I have two other divs, contentLeft and contentRight.

contentLeft is always 205px. I want contentRight to automatically fill the remaining space in contentBody. How can I achieve this?

#div contentLeft{
  width:205px;
  float:left;
}

#div contentRight{
  width:<**100% - 205px**>;
  float:left;
}

Edit: Sorry, I meant to write "N%" instead of 100%, this needs to work for a containing area of any percentage or size.

Answer 1

the easiest thing to do is to position them both absolutely then set contentleft to the desired with and add margin-left equal to that same width - as follows:

#div contentLeft{
  position:absolute;
  top:0;
  left:0;
  width:205px;
}

#div contentRight{
  position:absolute;
  width:100%;
  top:0;
  left:0;
  margin-left:205px;
}

Answer 2

You can put float left and width only for contentLeft

.contentLeft{
 width:205px;
 float:left;
 border:1px solid red;

}

.contentRight{
 border:1px solid red;
}

Answer 3

The correct way is to use CSS display:table on the wrapper and display:table-cell on the columns. This keeps your semantics correct but gives you all the benefits of tables including cells stretching to fill remaining space.

As is typical IE doesn't support this valuable CSS property so you might want to consider using a real table until it does (or perform some hacks with JS or conditional comments).

<style>
.table {display:table;}
.tr {display:table-row;}
.td {display:table-cell;}
</style>

<div class="table" style="width:100%">
  <div class="tr">
    <div class="td" style="width:205px"><!-- left --></div>
    <div class="td"><!-- right, stretch to fit --></div>
  </div>
</div>

<!--[if ie]>
<script>
// pseudocode, IE6 doesn't support document.getElementsByClassName()
// http://robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/
for (node in getElementsByClassName('table')) {node.tagName = 'table';};
for (node in getElementsByClassName('tr')) {node.tagName = 'tr';};
for (node in getElementsByClassName('td')) {node.tagName = 'td';};
</script>
<![endif]-->

Answer 4

The following should do it:

#contentBody{
  width:N%
}
#div contentLeft{
  width:205px;
  float:left;
}

#div contentRight{
  margin-left:205px;
}