CSS HTML - DIV height fill remaining space

Question

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?

Answer 1

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>

Answer 2

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); 

Answer 3

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

http://www.w3.org/TR/css3-flexbox/

Answer 4

You need a block formatting context:

#c1,#c2 {
    background-color: red;
    float: left;
    width: 200px;
}
#c2 {
    background-color: green;
}
#c3 {
    background-color: yellow;
    height: 40px;
    overflow: auto;
}

it is the overflow that makes it work. More info: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Answer 5

Here is somthing i thought about using some CSS only. i've tested it in FF12, GC18, SAF5.1 & IE 7,8,9,9CV.

.Clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.Clearfix {
  display: inline-block;
}
html[xmlns] .Clearfix {
  display: block;
}
* html .Clearfix {
  height: 1%;
}
#Wrapper {
  background-color: #FC20C9;
}
#col_1 {
  float: left;
  width: 150px;
  background-color: #FF0000;
}
#col_2 {
  float: left;
  width: 100px;
  background-color: #00CC00;
}
#col_3 {
  width: auto;
  float: none;
  background-color: #0066FF;
  overflow: hidden;
}

<div id="Wrapper" class="Clearfix">
  <div id="col_1">Lorem ipsum</div>
  <div id="col_2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  <div id="col_3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
enter code here