Make a div fill up the remaining width
How can I make a div fill up the remaining width?
<div id="Main" style="width: 500px;">
<div id="div1" style="width: 100px;"></div>
<div id="div2"></div>
<div id="div3" style="width: 100px; float: right;"></div>
</div>
How can I get div2 to fill up the remainder?
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
Up-to-date solution (October 2014) : ready for fluid layouts
Introduction:
This solution is even simpler than the one provided by Leigh. It is actually based on it.
Here you can notice that the middle element (in our case, with "content__middle" class) does not have any dimensional property specified - no width, nor padding, nor margin related property at all - but only an overflow: auto; (see note 1).
The great advantage is that now you can specify a max-width and a min-width to your left & right elements. Which is fantastic for fluid layouts.. hence responsive layout :-)
note 1: versus Leigh's answer where you need to add the margin-left & margin-right properties to the "content__middle" class.
Code with non-fluid layout:
Here the left & right elements (with classes "content__left" and "content__right") have a fixed width (in pixels): hence called non-fluid layout.
Live Demo on http://jsbin.com/qukocefudusu/1/edit?html,css,output
<style>
/*
* [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
* [2] "overflow: auto;" makes this div take the remaining width
*/
.content {
width: 100%;
}
.content__left {
width: 100px;
float: left; /* [1] */
background-color: #fcc;
}
.content__middle {
background-color: #cfc;
overflow: auto; /* [2] */
}
.content__right {
width: 100px;
float: right; /* [3] */
background-color: #ccf;
}
</style>
<div class="content">
<div class="content__left">
left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
</div>
<div class="content__right">
right div<br/>right div<br/>right div<br/>right div<br/>
</div>
<div class="content__middle">
middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
</div>
</div>
Code with fluid layout:
Here the left & right elements (with classes "content__left" and "content__right") have a variable width (in percentages) but also a minimum and maximum width: hence called fluid layout.
Live Demo in a fluid layout with the max-width properties http://jsbin.com/runahoremuwu/1/edit?html,css,output
<style>
/*
* [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
* [2] "overflow: auto;" makes this div take the remaining width
*/
.content {
width: 100%;
}
.content__left {
width: 20%;
max-width: 170px;
min-width: 40px;
float: left; /* [1] */
background-color: #fcc;
}
.content__middle {
background-color: #cfc;
overflow: auto; /* [2] */
}
.content__right {
width: 20%;
max-width: 250px;
min-width: 80px;
float: right; /* [3] */
background-color: #ccf;
}
</style>
<div class="content">
<div class="content__left">
max-width of 170px & min-width of 40px<br />left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
</div>
<div class="content__right">
max-width of 250px & min-width of 80px<br />right div<br/>right div<br/>right div<br/>right div<br/>
</div>
<div class="content__middle">
middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
</div>
</div>
Browser Support
Tested on BrowserStack.com on the following web browsers:
- IE7 to IE11
- Ff 20, Ff 28
- Safari 4.0 (windows XP), Safari 5.1 (windows XP)
- Chrome 20, Chrome 25, Chrome 30, Chrome 33,
- Opera 20
Flex-boxes are the solution - and they're fantastic. I've been wanting something like this out of css for a decade. All you need is to add display: flex to your style for "Main" and flex-grow: 100 (where 100 is arbitrary - its not important that it be exactly 100). Try adding this style (colors added to make the effect visible):
<style>
#Main {
background-color: lightgray;
display: flex;
}
#div1 {
border: 1px solid green;
height: 50px;
display: inline-flex;
}
#div2 {
border: 1px solid blue;
height: 50px;
display: inline-flex;
flex-grow: 100;
}
#div3 {
border: 1px solid orange;
height: 50px;
display: inline-flex;
}
</style>
More info about flex boxes here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Use the CSS Flexbox flex-grow property to achieve this.
.main {
display: flex;
}
.col-1, .col-3 {
flex: 0 0 100px;
}
.col-2 {
flex-grow: 1;
}<div class="main">
<div class="col-1" style="background: #fc9;">Left column</div>
<div class="col-2" style="background: #eee;">Middle column</div>
<div class="col-3" style="background: #fc9;">Right column</div>
</div>Although a bit late in posting an answer, here is an alternative approach without using margins.
<style>
#divMain { width: 500px; }
#div1 { width: 100px; float: left; background-color: #fcc; }
#div2 { overflow:hidden; background-color: #cfc; }
#div3 { width: 100px; float: right; background-color: #ccf; }
</style>
<div id="divMain">
<div id="div1">
div 1
</div>
<div id="div3">
div 3
</div>
<div id="div2">
div 2<br />bit taller
</div>
</div>
This method works like magic, but here is an explanation :)\
Fiddle with a similar sample here.