Question

104

CSS HTML - DIV height fill remaining space

rated 0 times [ 105] [ 1] / answers: 1 / hits: 32435 / 14 Years ago, sun, february 20, 2011, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

herman

Add To Favorites

Follow

Total Points: 110

Total Questions: 90

Total Answers: 108

Location: Bosnia and Herzegovina

Member since Thu, Jun 24, 2021

3 Years ago

answered 14 Years ago taylert · Accepted Answer

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>