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?

Thanks, I will try to make all the answers. – Andy Hin Feb 20 '11 at 19:40 — Andy Hin, Feb 20 '11 at 19:40
Didn't you were just asking about height instead of width? – danielrvt Jan 07 '14 at 19:32 — danielrvt, Jan 07 '14 at 19:32

FMM · Accepted Answer · 2015-06-26T15:11:08.767

28

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>

edited Jun 26 '15 at 15:11

answered Dec 03 '11 at 04:00

FMM

4,289
1
25
44

Did you test your example. I do no see col3 filling out the remaining space. http://jsfiddle.net/Hb6rL/8/ – Pinkie Dec 24 '11 at 08:59
JSFiddle updated. Just had to add a 'right: 0px;' to column 3. – FMM Dec 26 '11 at 15:32
4

This is correct and should be the accepted answer. Using JavaScript for basic layout is terrible form. – Coderer May 14 '13 at 11:37

score 9 · Answer 2 · answered Feb 20 '11 at 19:21

9

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

answered Feb 20 '11 at 19:21

Hussein

42,480
25
113
143

This worked, for the most part. Had to add some buffer space since the widths don't include padding/margin, etc. – Andy Hin Feb 22 '11 at 16:59
2

If you wish to work it out with margin + padding, use .outerHeight(); – rickyduck Aug 30 '11 at 14:58
2

There's a way to do it without javascript; see my answer below. – FMM Dec 14 '11 at 22:36
@FMM Your answer is not below anymore ;) – Savas Vedova Apr 14 '15 at 07:19

score 4 · Answer 3 · answered Feb 20 '11 at 20:23

4

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/

answered Feb 20 '11 at 20:23

selbie

100,020
15
103
173

1

Be careful with flexbox, [it probably doesn't work the way you think it does](http://lists.w3.org/Archives/Public/www-style/2011Jan/0186.html), there's a [new draft](http://dev.w3.org/csswg/css3-flexbox/Overview.new.html) which changes the way they work to be more intuitive. – robertc Feb 22 '11 at 00:06
Not that I'm condemning your suggestion, but isn't describing floats as "hacks" a bit much? Especially given flexboxes (unfortunate) lack of support. – verism Mar 19 '13 at 15:00
These days **Flexbox** is the way to go unless you have to support really old browsers. – anthonynorton Oct 08 '15 at 16:38

score 2 · Answer 4 · edited Jun 25 '15 at 22:47

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

score 2 · Answer 5 · answered Jan 03 '12 at 13:47

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

score 0 · Answer 6 · answered Jun 25 '15 at 22:05

If you target the most recent browsers you can use the HTML5 calc function

#col_3 {
  width: calc(100%-(100px+150px));
}
#red {
  border: 1px solid goldenrod;
}
div {
  border: 1px solid;
}

<div id="red">
  <div id="col_1" style="width:150px; float:left;">1</div>
  <div id="col_2" style="width:100px; float:left;">2</div>
  <div id="col_3">3</div>
</div>

score 0 · Answer 7 · answered Feb 21 '11 at 17:37

Either using jQuery to calculate the remaining space, or use the css3 flexible box to fill up the remaining space:

http://www.html5rocks.com/tutorials/flexbox/quick/

diagram2 is the case you want - the last box with maximum 'box-flex' will take the remaining space (default box-flex is 0)

score -1 · Answer 8 · answered Feb 20 '11 at 18:29

-1

take off the width, and it should expand to fill everything. put width:100% if you'd like. you should check out the firebug plugin for firefox.

answered Feb 20 '11 at 18:29

changokun

1,563
3
20
27

1

This doesn't work in Firefox (the div goes to the next line). How can firebug help me with this issue? – Andy Hin Feb 20 '11 at 18:42
that won't work. the 100% will only make it take the width of the parent element, obviously that's not what was intended. – Renan Aug 19 '11 at 10:16

score -1 · Answer 9 · answered Feb 20 '11 at 18:30

-1

Put all three div's in a container, give col 1 and 2 fixed widths and set the 3rd to auto.

answered Feb 20 '11 at 18:30

Tiny Giant Studios

1,125
3
12
27

CSS HTML - DIV height fill remaining space

9 Answers9

Linked