So I have a layout like this:
div {
border: 1px solid
}<div id="col_1" style="float:left;width:150px;">1</div>
<div id="col_2" style="float:left;width:100px;">2</div>
<div id="col_3" style="float:left;width:<REMAINING_WIDTH>;">3</div>col_1 and col_2 take up a fixed amount of space. I want the third column to take up the rest of it. What is the best way to do accomplish this?
You could do something crazy, abandon the javascript and the not-quite-ready-for-prime-time CSS3 stuff and use absolute positioning.
See this jsfiddle. Bonus points for behaving well through browser resizes, too.
#col_1 {
position: absolute;
top: 0px;
bottom: 0px;
width: 100px;
background-color: #eee;
}
#col_2 {
position: absolute;
top: 0px;
bottom: 0px;
width: 150px;
left: 100px;
background-color: #ccd;
}
#col_3 {
position: absolute;
top: 0px;
bottom: 0px;
left: 250px;
right: 0px;
background-color: #cdc;
}<div id='col_1'>Column 1</div>
<div id='col_2'>Column 2</div>
<div id='col_3'>
Column 3
</div>Javascript is needed for this. If you want all 3 divs to fill up the window space (100%), then you we need to use javascript to detect how much space is left and assign the height of col_3 accordingly. With jQuery you can do
var one = $('#col_1').height(),
two = $('#col_2').height(),
remaining_height = parseInt($(window).height() - one - two);
$('#col_3').height(remaining_height);
You've already accepted an answer, but you could check out CSS Flexbox, which is designed to solve this exact problem without relying on "float:left" hacks. It works on Chrome, Safari, and FF (with -webkit and -moz prefixes). Not on IE yet.
Here's some quick links:
http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm