Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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!

like image 602
Jônatas Flausino Avatar asked Jan 15 '14 12:01

Jônatas Flausino


People also ask

How do I make my sidebar scroll sticky?

You can either make a custom stylesheet specifying the sidebar style or you can add an inline CSS code "position: sticky" to your sidebar element/container.


1 Answers

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

like image 165
Ruddy Avatar answered Sep 28 '22 13:09

Ruddy