3 column responsive layout with fixed sidebar

Hi I'm looking to create a 3 column responsive layout where one of the column (sidebar) is in fixed position.

Both sidebars have a width set in percents and also min & max-width properties in pixels. And I want that the content in the middle to fill all the space between the two sidebars please.

I beleive I can calculate the width of the sidebars using JS but I'm looking for the best approach hopefully using only CSS please.

It needs to support only IE9 not below.

I'm attaching a drawing for better understanding and will appreciate your help.

Answers


Tried a JsFiddle. Please see if it's what are you looking for.

Here the html code:

<header>Fixed Header</header>
<div id='container'>
    <nav>Navigation</nav>
    <article>Article</article>
    <footer>Footer</footer>
</div>
<aside>Fixed Aside</aside>

and here the css:

body
{
    text-align:center;
    padding:0;
    margin:0;
}

header
{
    height:50px;
    background:rgb(200,200,0);
    position:fixed;
    top:0;
    left:0;
    width:100%;
}

aside
{
    height:50px;
    background:rgb(200,0,0);
    position:fixed;
    top:50px;
    right:0;
    width:20%;
    height:700px;
}

#container
{
    margin-top:50px;
}

nav
{
    width:20%;
    float:left;
    height:700px;
    background:rgb(200,100,100);
}

article
{
    padding-right:20%;
}

footer
{
    clear:both;
    padding-right:20%;
    width:80%;
    background:gray;
    height:50px;
}

You should try Bootstrap classes, they work perfectly


Need Your Help

What are the best PDC 2008 videos that I need to look at?

pdc2008 pdc

Considering the full list of PDC videos published here what are, in your opinion, the best session to download and see, considering their relevance to your work, technology and so on? Pleas, one se...

add forms authentication to mvc4 site created with empty template

asp.net-mvc asp.net-mvc-4

I have a Mvc4 site that was created eith the empty template. How can I now include forms authentication to the site?