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

Question

I have a containing div (contentBody) that is N%. Inside this div, I have two more divs, contentLeft and contentRight.

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

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

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

Answer 1

The following should do it:

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

Answer 2

the easiest way is to set them both absolutely and set the contentleft to the desired c and add margin-left equal to the 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 3

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 4

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

As usual, IE does not support this valuable CSS property, so you may need to use a real table until this happens (or do 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]-->