How do I put two <div>s side-by-side, with the left <div> taking up 100% of the space not taken up by the right <div>?
Question
I've got a basic issue. Two <div> s side-by-side, the left <div> needs to be able to have a 'flexible' width, as in when the <div> on the right isn't displayed, the left <div> will then stretch to 100%.
My code currently is as follows, which doesn't fulfil the above requirement.
<html>
<head>
<style>
#container {
display: block;
}
#box-left {
width: 100%;
height: 100px;
background-color: red;
float: left;
}
#box-right {
width: 15%;
height: 100px;
background-color: blue;
float: right;
}
</style>
</head>
<div id="container">
<div id="box-left"></div>
<div id="box-right"></div>
</div>
<body>
</body>
Any pointers would be much appreciated.
4 answers
solution1
1 ACCPTED 2011-01-19 12:25:17
#container {
display: table;
table-layout: fixed;
}
#id-right, #id-left {
display: table-cell;
float: none;
}
#id-left {
/* no width */
}
#id-right {
width: 15%;
}
Unfortunately, that doesn't work in IE6, but apart from that it should do the trick.
solution2
0 2011-01-19 12:26:21
Have you tried using max-width:100%; for 'box-left' ?
solution3
0 2011-01-19 12:31:23
If you reverse the order in which #box-left and #box-right appear in the HTML, and remove the width property from #box-left in the CSS, it should work how you describe:
#box-left {
height: 100px;
background-color: red;
float: left;
}
...
<div id="container">
<div id="box-right"></div>
<div id="box-left"></div>
</div>
You might not want that source order though, in which case <table> s (or the CSS equivalent) are the only HTML/CSS layout system that allows for what you want to do.
solution4
0 2011-01-19 16:47:44
would setting the width of the left div to the rest of the space you have. So since your box-right is 15% make your box-left to 85%
here is code:
#container {
display: block;
}
#box-left {
width: 85%;
height: 100px;
background-color: red;
float: left;
}
#box-right {
width: 15%;
height: 100px;
background-color: blue;
float: 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.