Michael N Michael N - 5 months ago 6
CSS Question

How do I make a left-floated div take up 100% of the remaining space?

If I have a container with 75% width and two columns inside, left and right, with left being 10em in width, how do I get the right container to take up 100% of the space remaining?

I tried this with no luck:



html, body {
margin:0;
padding:0;
width:100%;
height:100%;
}
#container {
position:relative;
width:75%;
margin:0 auto;
background:blue;
}
#left-container {
position:relative;
float:left;
height:100%;
width:10em;
background:red;
}
#right-container {
position:relative;
float:left;
height:100%;
width:100%;
background:yellow;
}

<div id="container">
<div id="left-container">Left</div>
<div id="right-container">Right</div>
</div>





I can do this easily with percentages, but I need left to be a fixed 10em width.

Answer

You can make a box element take up the remainder of the space by removing float: left, removing the width and adding overflow:hidden to the right div

Working example

#right-container {
    position:relative;
    overflow: hidden;
    height:100%;
    background:yellow;
}
Comments