CODEWITHSUNDEEP
htmlcss
Jimmy
Jimmy

Reputation: 12487

Fixed width absolute sidebar with fluid content

I'm trying to create a fluid layout site which also has a left sidebar with the following properties:

  1. It doesn't scroll when the main content does
  2. It takes up the full height of the page

The only layout I have seen is this one: http://stugreenham.com/demos/fluid-width-with-a-fixed-sidebar/

HTML

<div id="page"> 
    <header id="sidebar"> 
        //SIDEBAR CONTENT HERE
    </header> 

    <article id="contentWrapper"> 
        <section id="content"> 
            //CONTENT HERE
        </section> 
    </article> 
</div>

CSS

html {
    overflow: hidden;
}

#sidebar { 
    background: #eee;
    float: left;
    left: 300px;
    margin-left: -300px;
    position: relative;
    width: 300px;
    overflow-y: auto;
}

#contentWrapper { 
    float: left;
    width: 100%;
}

#content {
    background: #ccc;
    margin-left: 300px;
    overflow-y: auto;
}

However I think this is a poor solution because not only does it require negative margins but it also requires javascript.

Is there a better way to achieve this?

Upvotes: 0

Views: 2429

Answers (2)

4dgaurav
4dgaurav

Reputation: 11506

Demo

css

#sidebar {
    position:fixed;
    height:100%;
    width: 300px;
    background-color: #ccc;
    overflow-y: auto;                   
}
#contentWrapper { /* not using margin */
    box-sizing:border-box;
    background-color:#eee;
    position:absolute;
    left:300px;
    width:calc(100% - 300px);
    min-height: 100%;
}
#contentWrapper { /* using margin */
    box-sizing:border-box;
    background-color:#eee;
    margin-left: 300px;
    /*position:absolute;
    left:300px;
    width:calc(100% - 300px);*/
    min-height: 100%;
}



html,body,#page {
    width: 100%;
    height: 100%;
}

Upvotes: 1

Nico O
Nico O

Reputation: 14102

You can do something like this: http://jsfiddle.net/9U2U4/ Demo with lot of Text: http://jsfiddle.net/9U2U4/1/

CSS:

html, body {
   height: 100%;
}
body {
    margin:0;
    padding:0;
}
#page {
    height: 100%;
}
#sidebar {
    position: fixed;
    left:0;
    top:0;
    bottom:0;
    width: 30%;
    background-color: #eee;
}
#contentWrapper {
    margin-left: 30%;
    min-height: 100%;
    position: relative;
    background: #ccc;
}

#content
{
    padding: 10px;
}

HTML:

<div id="page">
    <header id="sidebar">// Sidebar</header>
    <article id="contentWrapper">
        <section id="content">
            <p>Text</p>
        </section>
    </article>
</div>

Upvotes: 1

Related Questions