Jônatas Flausino Jônatas Flausino - 4 months ago 15
CSS Question

Fixed menu on left and content scrollable

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

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