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?

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

Solution 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

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

Comments

[KKK]

yeah, I can do that, The problem is when i resize the window even smaller two columns were auto seperating.I mean red is on top and blue is on bottom.

[Roy Sonasish]

its working fine while I resize the window.. because there is not any width in "#content"

[KKK]

This is also simple. Thanks @Arora

[Vladimir Starkov]

Can you argue for using display: table and against another solutions?

[Vladimir Starkov]

It is impossible to use box-shadow with this solution.

[Andy]

The box shadow is working on your fiddle, it is just covered up by the yellow div... remove background: yellow; and you will see.

[Andy]

@VladimirStarkov You had the box shadow hidden behind the yellow div... click here jsfiddle.net/WSgwp/17 and stop hassling me when you are wrong.

[fmalina]

Search engines read code linearly. Therefore I normally prefer to place unique content first and repetitive sidebars second in the source jsfiddle.net/WSgwp/277. It would also help someone using a screen reader, so they don't have to jump through all the malarkey to get to the meat and potato.