How to create a fixed width sidebar and full width content - css

Question

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?

Answer 1

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%;
}

Answer 2

Hey you can get your desired with pure css to give the margin-left:200px; to your #content
CSS
#main_wrap {
border:3px solid green;
}
#sidebar{
background:red;
width: 200px;
float:left;
}
#content{
background:blue;
margin-left:200px;
}
DEMO

Answer 3

You can try use negative margin.
full explanation and example (with demo):
https://shellcreeper.com/responsive-fixed-width-sidebar-why-and-how/
HTML:
<div class="wrapper">
<div class="content">
</div><!-- .content -->
<div class="sidebar">
</div><!-- .sidebar -->
</div><!-- .wrapper -->
CSS:
.wrapper{
margin-right: 200px;
}
.content{
width: 100%;
float: left;
}
.sidebar{
float: right;
width: 200px;
margin-right: -200px;
}

Answer 4

you can do this with css, just remove the width and float from #content.
#content{
background:blue;
}
Check the jsFiddle File