Fixed menu on left and content scrollable

Jônatas Flausino picture Jônatas Flausino · Jan 15, 2014 · Viewed 74.9k times · Source

I would like to have a menu which is fixed on left and the content is scrollable on the right.

What I want to do is exactly like this website: http://other.wpengine.com/

The menu fixed and content scrollable.

Could you guys help me out?

Thanks in advance!

Answer

Ruddy picture Ruddy · Jan 15, 2014

Quick one from me, check it out. You should at least have tried yourself, but I wasn't doing much so that's why I made something.

HTML:

<div id="left">Side menu</div>
<div id="right">Scroll
    <br />Scroll
    <br />Scroll
</div>

CSS:

html, body {
    height: 100%;
    margin: 0;
    font-size: 20px;
}
#left {
    width: 20%;
    height: 100%;
    position: fixed;
    outline: 1px solid;
    background: red;
}
#right {
    width: 80%;
    height: auto;
    outline: 1px solid;
    position: absolute;
    right: 0;
    background: blue;
}

DEMO HERE