<div id="sidebar">sidebar</div>
<div id="content">content</div>
The sidebar is a fixed width of 100px. How do I make the width of content to 100% of the browser width?
You can do this with simple CSS:
#sidebar {
float: left;
width: 100px;
}
#content {
margin-left: 100px;
}
Updated with wrapper
div:
HTML
<div id="wrapper">
<p>wrapper</p>
<div id="sidebar">sidebar</div>
<div id="content">content</div>
<p>wrapper</p>
</div>
CSS
* {
/* reset */
margin: 0;
padding: 0;
}
html,
body {
/* for demo purposes only */
height: 100%;
}
#wrapper {
/* for demo purposes only */
background: rgba(200, 200, 200, 0.6);
height: 100%;
}
#sidebar {
float: left;
width: 100px;
/* for demo purposes only */
background: rgba(200, 200, 200, 0.6);
height: 50%;
}
#content {
margin-left: 100px;
/* for demo purposes only */
background: rgba(200, 200, 200, 0.9);
height: 50%;
}
Working example: http://jsfiddle.net/kboucher/FK2tL/
You have to play with the width % just like the rest of us:
#content {
background: green;
float: left;
width: 75%;
}
I'd also consider adding a parent div of width: 100% as per the box model.
Just change your #content properties to this:
#content {
background: green;
float: left;
width: 100%;
margin-right: -200px;
}
So we are setting 100% width as you require, but offsetting the width of the other two DIVs. I learned this trick from CSS Zen Garden .
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.