Question

I would like a two-column web page with the right panel fixed-width and the left panel taking up the remaining space. The right panel should not scroll, but the left panel should. The scroll bar must be in between the left and right columns (in other words, the left div needs its own scroll bar rather than the whole page scrolling).

I currently have the HTML:

<div id="l"><!-- Lots of text so it will scroll --></div>
<div id="r">Right panel</div>

and CSS:

body {
  margin: 0;
  padding: 0;
}

#l {
  padding: 10px 360px 10px 10px;
  background-color: #808080;
  text-align: center;
  overflow-y: scroll;
}

#r {
  position: fixed;
  top: 0;
  right: 0;
  width: 350px;
  height: 100%;
  background-color: #f5f5f5;
  border-left: 1px solid #353535;
  padding: 10px;
}

At the moment, the scroll bar appears on the right of the whole page, rather than just the left div scrolling. Please help! (You can play with this jsFiddle.)

Answer 1

You can specify height for #main wrapper and set overflow: hidden; :
http://jsfiddle.net/DPZha/8/