Menu
I have a two-column layout and I want the left column to stay put and the right column to be scrollable. What's the easiest way to accomplish this?
985
Do you mean something like this? See http://jsfiddle.net/NGLN/bePrn/.
Tested on Win7 in IE7, IE8, IE9, Opera 11, FF 4, Chrome 12, SafariWin 5.
102
You could make two div elements with CSS-property overflow: auto. This will give you kind of an iframe style box - this also means that this won't be the default scrolling area.
Another possibility is to use fixed positioning on your static (unscrollable) column.
The could be accomplished with something like this:
<!doctype html>
<html>
<head>
<style>
#left {
width: 200px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
background: #ffa;
}
#right {
margin-left: 200px;
}
</style>
</head>
<body>
<div id="left">
Static container
</div>
<div id="right">
Lots of scrollable content goes here
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
