I want to create a page with sidebar and content. The sidebar has fixed width(200px)
and content should be
(body_width - sidebar width)
. So created in jQuery and working perfectly.
Edit
Example
But I want to know, is this possible do in CSS Only?
You can do this using display: table;
on the containing div and then display: table-cell;
on the inner divs. You can then apply a minimum width to the sidebar and the content will take up the rest of the page.
A demo can be found here
Don't let the use of display: table
put you off - this isn't using tabular mark up or making your html less semantic. It is merely making your browser treat the div as it would a table cell (which is exactly what you require)
HTML:
<div id="main_wrap">
<div id="sidebar">1</div>
<div id="content">2</div>
</div>
CSS:
#main_wrap {
display: table;
}
#sidebar {
background:red;
min-width: 200px;
display: table-cell;
}
#content {
background:blue;
display: table-cell;
width: 100%;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With