How do I make a left-floated div take up 100% of the remaining space?
Question
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.
4 answers
solution1
9 ACCPTED 2013-05-01 01:20:01
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;
}
solution2
1 2013-05-01 01:50:06
Another option is to put a left margin on the #right-container div:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
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;
margin-left: 11em;
height:100%;
background:yellow;
}
</style>
</head>
<body>
<div id="container">
<div id="left-container">
Left
</div>
<div id="right-container">
Right
</div>
</div>
</body>
</html>
solution3
1 2016-06-12 03:37:21
There are at least 2 options for this kind of problem at this moment (2016) using CSS3, far simpler solutions than the accepted answer, which is kind of a "hack" using overflow:hidden
- using
flexbox
html, body { margin: 0; padding: 0; width: 100%; height: 100%; } #container { width: 75%; margin: 0 auto; background: blue; display: flex } #left-container { height: 100%; width: 10em; background: red; } #right-container { height: 100%; flex:1; background: yellow; }
<div id="container"> <div id="left-container">Left</div> <div id="right-container">Right</div> </div>
- using
calc()
html, body { margin: 0; padding: 0; width: 100%; height: 100%; } #container { width: 75%; margin: 0 auto; background: blue; } #left-container { float: left; height: 100%; width: 10em; background: red; } #right-container { float: left; height: 100%; width: calc(100% - 10em); background: yellow; }
<div id="container"> <div id="left-container">Left</div> <div id="right-container">Right</div> </div>
solution4
0 2016-06-12 03:22:22
I'd like to add-in another option as below:
#header-left-section {
float: left;
position: absolute;
z-index: 1000;
}
#header-right-section {
height: 90px;
width:100%;
position: relative;
overflow: hidden;
}
#header-right-section ins,
#header-right-section div{float:right}
The left div just take enough space for its inside stuff. The right part take 100% the width, and left part stays above it only left(by z-index). Last css line is just to make inner stuff if of right div to be float on the right.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.