CODEWITHSUNDEEP
javascripthtmlcss
Juan
Juan

Reputation: 15715

How do you make a menu on the left that stays while the right side scrolls

Like this one. I thought it was a frame but apparently is not.

Upvotes: 1

Views: 164

Answers (3)

John Hartsock
John Hartsock

Reputation: 86872

This will give you a 200PX tall fixed header and footer, a 200PX wide left navigation, and scrollable content area. here is a demo http://jsbin.com/afesa3/2/edit

<div id="header" style="position:absolute; top:0px; left:0px; height:200px;right:0px;overflow:hidden;background-color:#FF0000">
    Header
</div>
  <div id="leftNav" style="position:absolute; top:200px; bottom:200px; left:0px; width:200px; overflow:hidden; background-color:#00FF00" >Left Nav</div>
  <div id="rightContent" style="position:absolute; top:200px; bottom:200px; left:200px; right:0px; overflow:auto;background-color:#0000FF">Right Content</div>
  <div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; right:0px; overflow:hidden;background-color:#FF0000"></div>

Upvotes: 1

Peter C
Peter C

Reputation: 6307

You need CSS. Try something like:

#menu {
    left: 20px;
    position: fixed;
    top: 20px;
    width: 200px;
}

Adjust the values as necessary.

Upvotes: 2

shoebox639
shoebox639

Reputation: 2312

in css: position: fixed

Upvotes: 3

Related Questions