Expand a Div to Fill the Remaining Width

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.


  • 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 class="second">View</div>

Make a div fill up the remaining width

Try out something like this:

#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; }

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

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

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 element to fill remaining area of parent container

Not sure here...

I want it to expand downward to fill the remaining room in the container.

For the ul, is height: 100% inside a display: flex; container would be okay?

box-sizing: border-box;
margin: 0;
border: 1px dotted red;
display: flex;
flex-direction: column;
width: 100%;
background-color: yellow;
height: 100%;
<div class="container">
<input type="text"/>

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:

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 fill 100% of remaining width

Updated answer:

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

.container {  border: 4px solid red;  display: flex;}.content {  border: 4px solid green;  flex-grow: 1;  margin: 5px;}.sidebar {  border: 4px solid blue;  margin: 5px 5px 5px 0;  width: 200px;}
<div class="container">  <div class="content">    Lorem ipsum dolor sit amet.  </div>  <div class="sidebar">    Lorem ipsum.  </div></div>

Fill the remaining height or width in a flex container

Use the flex-grow property to make a flex item consume free space on the main axis.

This property will expand the item as much as possible, adjusting the length to dynamic environments, such as screen re-sizing or the addition / removal of other items.

A common example is flex-grow: 1 or, using the shorthand property, flex: 1.

Hence, instead of width: 96% on your div, use flex: 1.

You wrote:

So at the moment, it's set to 96% which looks OK until you really squash the screen - then the right hand div gets a bit starved of the space it needs.

The squashing of the fixed-width div is related to another flex property: flex-shrink

By default, flex items are set to flex-shrink: 1 which enables them to shrink in order to prevent overflow of the container.

To disable this feature use flex-shrink: 0.

For more details see The flex-shrink factor section in the answer here:

  • What are the differences between flex-basis and width?

Learn more about flex alignment along the main axis here:

  • In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Learn more about flex alignment along the cross axis here:

  • How does flex-wrap work with align-self, align-items and align-content?

Expand input to take remaining width

The solution is already in your provided link:

.left {
overflow: hidden;


Another solution would be to add a margin:

.left {
margin-right: 200px;

The first one is more flexible, though.

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 id="searchBar">
<input type="text" />
<div class="button orange" id="myAccount">My Account</div>
<div class="button red" id="basket">Basket (2)</div>

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

Apply the following CSS:

#header {
background-color: #323C3E;
.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;

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/

Related Topics

Leave a reply