How to create a fixed width sidebar and full width content

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