Search code examples
cssmenucss-positionfixed

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!

Solution

  • 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