How to Set a Floating Div's Width to Take Up Remaining Space Without Pushing Other Divs Down

How do you set a floating div's width to take up remaining space without pushing other divs down?

Classic Floats

If you order it:

<div id="left-column"></div>
<div id="right-column"></div>
<div id="middle-column"></div>

and you float the left column left, and the right column right, the middle column should fill in the remaining space. You will have some issues with margins, borders and paddings though.

Flexbox

If you don't need to support older browsers, you can use flexbox. With flexbox, this sort of structure becomes much simpler, and the markup doesn't need to change.

You will need to be able to select the parent element, so for the purposes of this demo, the code will be wrapped by <div class="wrapper">.

.wrapper {  display: flex;  flex-direction: row;  height: 200px;}
.left {  background-color: red;  width: 100px;}.middle {  background-color: green;  flex: 1;}.right {  background-color: blue;  width: 100px;}

<div class="wrapper">  <div class="left"></div>  <div class="middle"></div>  <div class="right"></div></div>

How to make a div fill a remaining horizontal space?

This seems to accomplish what you're going for.

#left {  float:left;  width:180px;  background-color:#ff0000;}#right {  width: 100%;  background-color:#00FF00;}

<div>  <div id="left">    left  </div>  <div id="right">    right  </div></div>

Expand a div to fill the remaining width

The solution to this is actually very easy, but not at all obvious. You have to trigger something called a "block formatting context" (BFC), which interacts with floats in a specific way.

Just take that second div, remove the float, and give it overflow:hidden instead. Any overflow value other than visible makes the block it's set on become a BFC. BFCs don't allow descendant floats to escape them, nor do they allow sibling/ancestor floats to intrude into them. The net effect here is that the floated div will do its thing, then the second div will be an ordinary block, taking up all available width except that occupied by the float.

This should work across all current browsers, though you may have to trigger hasLayout in IE6 and 7. I can't recall.

Demos:

Fixed Left: http://jsfiddle.net/A8zLY/5/
Fixed Right: http://jsfiddle.net/A8zLY/2/

div {
  float: left;
}

.second {
  background: #ccc;
  float: none;
  overflow: hidden;
}

<div>Tree</div>
<div class="second">View</div>

Stop div width from pushing it out of place

margin-left:150px for the second div? or use padding-left:150px for aligning content

Make a div fill up the remaining width

Try out something like this:

<style>
    #divMain { width: 500px; }
    #left-div { width: 100px; float: left; background-color: #fcc; }
    #middle-div { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
    #right-div { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="left-div">
        left div
    </div>
    <div id="right-div">
        right div
    </div>
    <div id="middle-div">
        middle div<br />bit taller
    </div>
</div>

divs will naturally take up 100% width of their container, there is no need to explicitly set this width. By adding a left/right margin the same as the two side divs, it's own contents is forced to sit between them.

Note that the "middle div" goes after the "right div" in the HTML

Expand div to max width when float:left is set

Hope I've understood you correctly, take a look at this: http://jsfiddle.net/EAEKc/

<!DOCTYPE html><html lang="en">
<head>  <meta charset="UTF-8" />  <title>Content with Menu</title>  <style>    .content .left {      float: left;      width: 100px;      background-color: green;    }        .content .right {      margin-left: 100px;      background-color: red;    }  </style></head>
<body>  <div class="content">    <div class="left">      <p>Hi, Flo!</p>    </div>    <div class="right">      <p>is</p>      <p>this</p>      <p>what</p>      <p>you are looking for?</p>    </div>  </div></body>
</html>

Make a div fill the height of the remaining screen space

2015 update: the flexbox approach

There are two other answers briefly mentioning flexbox; however, that was more than two years ago, and they don't provide any examples. The specification for flexbox has definitely settled now.

Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.

(taken from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)

All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim.

To check current support you can also see here:
http://caniuse.com/#feat=flexbox

Working example

With flexbox you can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions. In my example I have set the header to snap to its content (as per the OPs question), I've added a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space.

html,body {  height: 100%;  margin: 0;}
.box {  display: flex;  flex-flow: column;  height: 100%;}
.box .row {  border: 1px dotted grey;}
.box .row.header {  flex: 0 1 auto;  /* The above is shorthand for:  flex-grow: 0,  flex-shrink: 1,  flex-basis: auto  */}
.box .row.content {  flex: 1 1 auto;}
.box .row.footer {  flex: 0 1 40px;}

<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class="box">  <div class="row header">    <p><b>header</b>      <br />      <br />(sized to content)</p>  </div>  <div class="row content">    <p>      <b>content</b>      (fills remaining space)    </p>  </div>  <div class="row footer">    <p><b>footer</b> (fixed height)</p>  </div></div>

How to make a div with a fixed width push another div with a relative width when resizing the browser window?

I would use display: table and table-cell for that.

JSFiddle: http://jsfiddle.net/maximgladkov/M3wP8/

HTML

<div id="container">
    <div id="content">
        Content
    </div>
    <div id="sidebar">
        Sidebar
    </div>
</div>

CSS

#container {
    display: table;
    width: 70%;
    margin: 0 auto;
}

#content, #sidebar {
    display: table-cell;
}

#content {
    max-width: 70%;
    border: 1px solid blue;
}

#sidebar {
    width: 254px;
    border: 1px solid red;
}

How to make a div fill up remaining horizontal space

You can also contain floats with overflow:hidden:

#div2{
  overflow:hidden;
  z-index: 1;
}

The DIV will fill up the remaining space (http://jsfiddle.net/MAjwt/)

How to get a floating-DIV to fill available space within its parent DIV?

If you use floats, you pretty much need to give them widths. Floats are fine if you specify the width or you're happy with whatever the browser calculates as the minimum required width. As soon as you need them to expand to fill available space you're out of luck.

In fact you're using the wrong tool.

So you have two possibilities:

Fix the size of the floats; or
Use a table.

With tables this is a trvial problem to solve (waits for the anti-table pure-CSS fanatics to go nuts).

EDIT: Ok, you want to do verticall centering as well. Now you're really in trouble. See Can you do this HTML layout without using tables? for how hard even simple layout can be with pure CSS, particularly when you want to do vertical centering (when the container or the child aren't fixed height) or side by side content.

Again, tables make this trivial with vertical-align: middle.

If you want more information on vertical centering with pure CSS, see:

Vertical Centering in CSS: three levels of nested divs... just to get vertical centering;
How to: vertical centering with CSS; and
Vertical centering with CSS.