Make a Div Fill Up the Remaining Width

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

make div fill up remaining space

What about something like this? https://jsfiddle.net/Siculus/9vs5nzy2/

CSS:

#container{
width: 100%;
float:left;
overflow:hidden; /* instead of clearfix div */
}
#right{
float:right;
width:50px;
background:yellow;
}
#left{
float:left;
width:50px;
background:red;
}
#remaining{
overflow: hidden;
background:#DEDEDE;
}

Body:

<div id="container">
<div id="right">div3</div>

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

<div id="remaining">div2, remaining</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>

CSS fill remaining width

You can realize this layout using CSS table-cells.

Modify your HTML slightly as follows:

<div id="header">
<div class="container">
<div class="logoBar">
<img src="http://placehold.it/50x40" />
</div>
<div id="searchBar">
<input type="text" />
</div>
<div class="button orange" id="myAccount">My Account</div>
<div class="button red" id="basket">Basket (2)</div>
</div>
</div>

Just remove the wrapper element around the two .button elements.

Apply the following CSS:

#header {
background-color: #323C3E;
width:100%;
}
.container {
display: table;
width: 100%;
}
.logoBar, #searchBar, .button {
display: table-cell;
vertical-align: middle;
width: auto;
}
.logoBar img {
display: block;
}
#searchBar {
background-color: #FFF2BC;
width: 90%;
padding: 0 50px 0 10px;
}

#searchBar input {
width: 100%;
}

.button {
white-space: nowrap;
padding:22px;
}

Apply display: table to .container and give it 100% width.

For .logoBar, #searchBar, .button, apply display: table-cell.

For the #searchBar, set the width to 90%, which force all the other elements to compute a shrink-to-fit width and the search bar will expand to fill in the rest of the space.

Use text-align and vertical-align in the table cells as needed.

See demo at: http://jsfiddle.net/audetwebdesign/zWXQt/

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>

Make div in the middle fill remaining space

using flexbox you can do that,

  • apply display: flex; to the parent (.header) so the whole container is now a flex element
  • use align-items:center in parent (.header) to vertically align them, see more about align-items
  • apply flex:1(shorthanded for flex-grow:1 flex-shrink:1 flex-basis:0) to input to grow the remaining space left

.header {  display: flex; /* justify-content: space-between; */  /* this is optional, because input{flex:1} is doing its job */  align-items:center;  /*demo*/  border:1px solid red;  height:60px;}
input { flex: 1; /*demo*/ margin: 0 10px;}
<div class="header">  <div id="logo">Logo here</div>  <input type="text" />  <div class="button">Button title</div></div>

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>

Make div occupy remaining width of parent

First of all, try avoiding float, it's quite messy.
In order to achieve the 'two items on one line' trick, you need to know to set the width of your button, and tell the input to take the remaining space with the calc() CSS attribute.

input {
display: inline-block;
width: calc(100% - 100px);
}

button {
width: 100px;
margin: 0;
display: inline-block
}

div {
width: 100%;
}

Check out this flexbox guide as well, it's very informative on how to place objects!

Good luck!

How to make a div fill remaining space?

Here is a solution which defines header, footer and #contentParent as position: fixed and gives #contentParent 100% height minus the height of header and footer (= 80px in this example - this depends on your own settings).

Any additional content has to be added inside #contentParent - this element will then scroll since it has overflow-y:auto;. The header and footer will always remain on the screen due to their absolute position and won't cover any part of the content since #contentParent has according margins at top and bottom which equal the height of the header and footer.

The background image will cover #contentParent completely and won't scroll diue to background-attachment: fixed (integrated in the shortcut background property)

html,body,#main {  height: 100%;  margin: 0px;}
.floatClear { clear: both;}
.headerGraphics { display: inline;}
#header { position: fixed; top: 0; width: 100%; height: 40px; background: #023489; text-align: center;}
#logoCompany { display: inline;}
#contentParent { position: fixed; height: calc(100% - 80px); width: 100%; overflow-Y: auto; margin: 40px 0; background: url(http://placehold.it/1500x800/fc7) center center no-repeat; background-position: fixed; background-size: cover;}
#leftPane { background: yellow; float: left; margin: 100px 0 0 10%; opacity: .5; width: 40%;}
#rightPane { background: green; float: right; margin: 100px 10% 0 0; opacity: .5; width: 40%;}
#footer { position: fixed; bottom: 0; width: 100%; height: 40px; width: 100%; background: lightblue;}
<body>  <div id='main'>    <div id='header'>      <div id='logoCompany'>        <img class='headerGraphics' src='Graphics\logo smaller.jpg'><img class='headerGraphics' src='Graphics\Marvelous Header3 small.png'>      </div>    </div>    <div id='contentParent' class='floatClear'>      <div id='content' style="text-align: center;">        <div id='leftPane'>          Left Col        </div>        <div id='rightPane'>          Right Col        </div>      </div>    </div>    <div id='footer'>      Footer    </div>  </div></body>

How to fill 100% of remaining width

Updated answer:

The answers here are pretty old. Today, this can be achieved easily with flexbox: