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>?
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.
#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.
Have you tried using max-width:100%; for 'box-left' ?
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.
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;
}
加载中,请稍侯......
精彩评论