How to create a sidebar with a fixed width and full width

Question

I want to create a page with a sidebar and content. The sidebar has a fixed width(200px) , and the content should be

(body_width - sidebar width)

. Created in jQuery and works just fine.

Edit

Example

But I want to know if this is only possible in CSS?

Answer 1

You can do this using display: table; in the containing div, and then display: table-cell; on internal divs. You can then apply the minimum width to the sidebar, and the content will occupy the rest of the page.

Demo can be found here.

Don't let display: table disable it - it doesn't use table marking or makes your html less semantic. It just makes your browser a processed div as it will be a table cell (this is exactly what is required)

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 margin-left:200px; 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 to use a 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 jsFiddle file