How to acheive scrollable content in multiples divs

Question

I want to make a layout that looks like this:

The layout consists of three fields:

1. A header at the top with a fixed height, dynamic width, and vertically scrollable content.

2. Body below header, with dynamic width and height, with vertically scrollable content.

3. A sidebar to the right, with a fixed width, dynamic height, and no scroll. (This should remain fixed when you scroll the body content)

Dynamic height and/or width means it will resize with the window, not that it resizes with content.

Here's one of my (very failed) attempts here: http://jsfiddle.net/uYTht/34/

HTML structure:

#header {
  width: 100%;
  height: 100px;
  margin-right: 150px;
  background-color: green;
  overflow-y: scroll;
}

#content {
  background-color: blue;
  height: 100%;
  overflow-y: scroll;
}

#sidebar {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: -150px;
  width: 150px;
  height: 100%;
  float: right;
  background-color: red;
  overflow: hidden;
}

<div id="header">
  header content
</div>
<div id="content">
  body content
</div>
<div id="sidebar">
  sidebar content
</div>

Answer 1

You can do this by using defined heights and widths for each of the elements with the overflow property.

To make a box scrollable (if the content doesn't fit inside):

overflow: auto;

To make a box not scrollable:

overflow:hidden;

Note that if the height and width are undefined, the element will grow to fit all the contents.

I made a (not very pretty, but functional) example here:

JSFiddle

.container {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.left {
  width: calc(100% - 200px);
  height: 100%;
  overflow: hidden;
  float: left;
}

.left .header {
  width: 100%;
  height: 100px;
  background: red;
  color: white;
  overflow: auto;
}

.left .body {
  width: 100%;
  height: 300px;
  background: green;
  color: white;
  overflow: auto;
}

.sidebar {
  width: 200px;
  height: 400px;
  float: right;
  overflow: hidden;

  background: blue;
  color: white;
}

<div class="container">
  <div class="left">
    <div class="header">
      This content should scroll:<br><br>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nulla non erat laoreet laoreet a et augue. Phasellus convallis, elit in commodo ultricies, mi nulla ultricies erat, non dictum massa orci at sem. Donec condimentum sit amet nisl tempor dictum. Nulla scelerisque, odio id malesuada viverra, lectus erat consequat nisl, ut pulvinar nibh mauris ac nisi. Quisque mauris nisl, sodales eu mattis at, congue et diam. Morbi ac nisl auctor, placerat est vitae, pharetra nisl. Suspendisse rhoncus nulla ut neque rhoncus molestie. Praesent sit amet laoreet turpis, ut imperdiet purus. Suspendisse dignissim enim et metus hendrerit, sit amet aliquam orci venenatis. Sed porttitor eu erat viverra pharetra. Aliquam laoreet velit enim, ut sollicitudin nisl pretium eu.Curabitur nec augue pulvinar, sodales felis vitae, molestie odio. Sed quis dapibus est, ac hendrerit elit. Etiam scelerisque lacinia justo, quis sodales sapien luctus at. Praesent a interdum purus, et lobortis arcu. Phasellus luctus risus nec tortor condimentum pretium. Integer ante odio, malesuada eget risus id, adipiscing luctus nunc. Sed mollis leo in dui rutrum congue. Etiam justo risus, scelerisque et metus porta, dignissim sodales urna.Ut porttitor faucibus ipsum sit amet dapibus. Phasellus euismod eu libero sit amet euismod. Proin dolor nisl, suscipit quis commodo non, luctus quis enim. Donec justo ante, facilisis vehicula mauris viverra, pretium tempus purus. Praesent mollis nisl vel diam scelerisque lacinia. Vestibulum semper sem vitae interdum porta. Vestibulum commodo, erat adipiscing faucibus rhoncus, massa diam pulvinar mauris, a varius velit diam eu orci. Praesent scelerisque enim nec urna elementum luctus.Aenean luctus at sem vitae varius. Donec ullamcorper gravida sapien, sit amet aliquam quam ultricies euismod. Nam vel massa at sapien eleifend feugiat. Mauris non sem ac mauris iaculis fermentum id sit amet nibh. Sed commodo augue a semper convallis. Pellentesque vestibulum euismod molestie. Praesent consectetur neque adipiscing, malesuada arcu ut, bibendum quam. Aenean eget odio magna. Vivamus sit amet ultrices tortor. Mauris cursus adipiscing interdum. Vivamus in iaculis urna, id sollicitudin enim. Maecenas at vestibulum lorem. Nulla mauris quam, tincidunt ut velit et, mollis venenatis libero. Vivamus id interdum ligula. Curabitur in vestibulum nisi, eu imperdiet ante.Curabitur ac lobortis magna. Vivamus eu ante quis velit elementum euismod. Nulla eget ornare velit, tempus porttitor justo. In at nisi venenatis metus suscipit ultricies. Sed vel nisl lectus. Ut feugiat consequat eros ut gravida. In hac habitasse platea dictumst. Etiam placerat bibendum diam, eu varius nisl accumsan vel. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec eu malesuada magna, non pharetra odio. Quisque risus ante, tincidunt a interdum sed, feugiat porta ante. Cras at eros tortor.
    </div>
    <div class="body">
      This content should scroll:<br><br>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nulla non erat laoreet laoreet a et augue. Phasellus convallis, elit in commodo ultricies, mi nulla ultricies erat, non dictum massa orci at sem. Donec condimentum sit amet nisl tempor dictum. Nulla scelerisque, odio id malesuada viverra, lectus erat consequat nisl, ut pulvinar nibh mauris ac nisi. Quisque mauris nisl, sodales eu mattis at, congue et diam. Morbi ac nisl auctor, placerat est vitae, pharetra nisl. Suspendisse rhoncus nulla ut neque rhoncus molestie. Praesent sit amet laoreet turpis, ut imperdiet purus. Suspendisse dignissim enim et metus hendrerit, sit amet aliquam orci venenatis. Sed porttitor eu erat viverra pharetra. Aliquam laoreet velit enim, ut sollicitudin nisl pretium eu.Curabitur nec augue pulvinar, sodales felis vitae, molestie odio. Sed quis dapibus est, ac hendrerit elit. Etiam scelerisque lacinia justo, quis sodales sapien luctus at. Praesent a interdum purus, et lobortis arcu. Phasellus luctus risus nec tortor condimentum pretium. Integer ante odio, malesuada eget risus id, adipiscing luctus nunc. Sed mollis leo in dui rutrum congue. Etiam justo risus, scelerisque et metus porta, dignissim sodales urna.Ut porttitor faucibus ipsum sit amet dapibus. Phasellus euismod eu libero sit amet euismod. Proin dolor nisl, suscipit quis commodo non, luctus quis enim. Donec justo ante, facilisis vehicula mauris viverra, pretium tempus purus. Praesent mollis nisl vel diam scelerisque lacinia. Vestibulum semper sem vitae interdum porta. Vestibulum commodo, erat adipiscing faucibus rhoncus, massa diam pulvinar mauris, a varius velit diam eu orci. Praesent scelerisque enim nec urna elementum luctus.Aenean luctus at sem vitae varius. Donec ullamcorper gravida sapien, sit amet aliquam quam ultricies euismod. Nam vel massa at sapien eleifend feugiat. Mauris non sem ac mauris iaculis fermentum id sit amet nibh. Sed commodo augue a semper convallis. Pellentesque vestibulum euismod molestie. Praesent consectetur neque adipiscing, malesuada arcu ut, bibendum quam. Aenean eget odio magna. Vivamus sit amet ultrices tortor. Mauris cursus adipiscing interdum. Vivamus in iaculis urna, id sollicitudin enim. Maecenas at vestibulum lorem. Nulla mauris quam, tincidunt ut velit et, mollis venenatis libero. Vivamus id interdum ligula. Curabitur in vestibulum nisi, eu imperdiet ante.Curabitur ac lobortis magna. Vivamus eu ante quis velit elementum euismod. Nulla eget ornare velit, tempus porttitor justo. In at nisi venenatis metus suscipit ultricies. Sed vel nisl lectus. Ut feugiat consequat eros ut gravida. In hac habitasse platea dictumst. Etiam placerat bibendum diam, eu varius nisl accumsan vel. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec eu malesuada magna, non pharetra odio. Quisque risus ante, tincidunt a interdum sed, feugiat porta ante. Cras at eros tortor.
    </div>
  </div>
  <div class="sidebar">
    This content should not scroll:<br><br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nulla non erat laoreet laoreet a et augue. Phasellus convallis, elit in commodo ultricies, mi nulla ultricies erat, non dictum massa orci at sem. Donec condimentum sit amet nisl tempor dictum. Nulla scelerisque, odio id malesuada viverra, lectus erat consequat nisl, ut pulvinar nibh mauris ac nisi. Quisque mauris nisl, sodales eu mattis at, congue et diam. Morbi ac nisl auctor, placerat est vitae, pharetra nisl. Suspendisse rhoncus nulla ut neque rhoncus molestie. Praesent sit amet laoreet turpis, ut imperdiet purus. Suspendisse dignissim enim et metus hendrerit, sit amet aliquam orci venenatis. Sed porttitor eu erat viverra pharetra. Aliquam laoreet velit enim, ut sollicitudin nisl pretium eu.Curabitur nec augue pulvinar, sodales felis vitae, molestie odio. Sed quis dapibus est, ac hendrerit elit. Etiam scelerisque lacinia justo, quis sodales sapien luctus at. Praesent a interdum purus, et lobortis arcu. Phasellus luctus risus nec tortor condimentum pretium. Integer ante odio, malesuada eget risus id, adipiscing luctus nunc. Sed mollis leo in dui rutrum congue. Etiam justo risus, scelerisque et metus porta, dignissim sodales urna.Ut porttitor faucibus ipsum sit amet dapibus. Phasellus euismod eu libero sit amet euismod. Proin dolor nisl, suscipit quis commodo non, luctus quis enim. Donec justo ante, facilisis vehicula mauris viverra, pretium tempus purus. Praesent mollis nisl vel diam scelerisque lacinia. Vestibulum semper sem vitae interdum porta. Vestibulum commodo, erat adipiscing faucibus rhoncus, massa diam pulvinar mauris, a varius velit diam eu orci. Praesent scelerisque enim nec urna elementum luctus.Aenean luctus at sem vitae varius. Donec ullamcorper gravida sapien, sit amet aliquam quam ultricies euismod. Nam vel massa at sapien eleifend feugiat. Mauris non sem ac mauris iaculis fermentum id sit amet nibh. Sed commodo augue a semper convallis. Pellentesque vestibulum euismod molestie. Praesent consectetur neque adipiscing, malesuada arcu ut, bibendum quam. Aenean eget odio magna. Vivamus sit amet ultrices tortor. Mauris cursus adipiscing interdum. Vivamus in iaculis urna, id sollicitudin enim. Maecenas at vestibulum lorem. Nulla mauris quam, tincidunt ut velit et, mollis venenatis libero. Vivamus id interdum ligula. Curabitur in vestibulum nisi, eu imperdiet ante.Curabitur ac lobortis magna. Vivamus eu ante quis velit elementum euismod. Nulla eget ornare velit, tempus porttitor justo. In at nisi venenatis metus suscipit ultricies. Sed vel nisl lectus. Ut feugiat consequat eros ut gravida. In hac habitasse platea dictumst. Etiam placerat bibendum diam, eu varius nisl accumsan vel. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec eu malesuada magna, non pharetra odio. Quisque risus ante, tincidunt a interdum sed, feugiat porta ante. Cras at eros tortor.
  </div>

</div>

---

You can make the sidebar a fixed width and adjust the other elements accordingly with calc:

.sidebar{
    width: 200px;
}

.left{
    width: calc(100% - 200px);
}

The JSFiddle has been updated to reflect this:

.container {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.left {
  width: calc(100% - 200px);
  height: 100%;
  overflow: hidden;
  float: left;
}

.left .header {
  width: 100%;
  height: 100px;
  background: red;
  color: white;
  overflow: auto;
}

.left .body {
  width: 100%;
  height: 300px;
  background: green;
  color: white;
  overflow: auto;
}

.sidebar {
  width: 200px;
  height: 400px;
  float: right;
  overflow: hidden;

  background: blue;
  color: white;
}

<div class="container">
  <div class="left">
    <div class="header">
      This content should scroll:<br><br>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nulla non erat laoreet laoreet a et augue. Phasellus convallis, elit in commodo ultricies, mi nulla ultricies erat, non dictum massa orci at sem. Donec condimentum sit amet nisl tempor dictum. Nulla scelerisque, odio id malesuada viverra, lectus erat consequat nisl, ut pulvinar nibh mauris ac nisi. Quisque mauris nisl, sodales eu mattis at, congue et diam. Morbi ac nisl auctor, placerat est vitae, pharetra nisl. Suspendisse rhoncus nulla ut neque rhoncus molestie. Praesent sit amet laoreet turpis, ut imperdiet purus. Suspendisse dignissim enim et metus hendrerit, sit amet aliquam orci venenatis. Sed porttitor eu erat viverra pharetra. Aliquam laoreet velit enim, ut sollicitudin nisl pretium eu.Curabitur nec augue pulvinar, sodales felis vitae, molestie odio. Sed quis dapibus est, ac hendrerit elit. Etiam scelerisque lacinia justo, quis sodales sapien luctus at. Praesent a interdum purus, et lobortis arcu. Phasellus luctus risus nec tortor condimentum pretium. Integer ante odio, malesuada eget risus id, adipiscing luctus nunc. Sed mollis leo in dui rutrum congue. Etiam justo risus, scelerisque et metus porta, dignissim sodales urna.Ut porttitor faucibus ipsum sit amet dapibus. Phasellus euismod eu libero sit amet euismod. Proin dolor nisl, suscipit quis commodo non, luctus quis enim. Donec justo ante, facilisis vehicula mauris viverra, pretium tempus purus. Praesent mollis nisl vel diam scelerisque lacinia. Vestibulum semper sem vitae interdum porta. Vestibulum commodo, erat adipiscing faucibus rhoncus, massa diam pulvinar mauris, a varius velit diam eu orci. Praesent scelerisque enim nec urna elementum luctus.Aenean luctus at sem vitae varius. Donec ullamcorper gravida sapien, sit amet aliquam quam ultricies euismod. Nam vel massa at sapien eleifend feugiat. Mauris non sem ac mauris iaculis fermentum id sit amet nibh. Sed commodo augue a semper convallis. Pellentesque vestibulum euismod molestie. Praesent consectetur neque adipiscing, malesuada arcu ut, bibendum quam. Aenean eget odio magna. Vivamus sit amet ultrices tortor. Mauris cursus adipiscing interdum. Vivamus in iaculis urna, id sollicitudin enim. Maecenas at vestibulum lorem. Nulla mauris quam, tincidunt ut velit et, mollis venenatis libero. Vivamus id interdum ligula. Curabitur in vestibulum nisi, eu imperdiet ante.Curabitur ac lobortis magna. Vivamus eu ante quis velit elementum euismod. Nulla eget ornare velit, tempus porttitor justo. In at nisi venenatis metus suscipit ultricies. Sed vel nisl lectus. Ut feugiat consequat eros ut gravida. In hac habitasse platea dictumst. Etiam placerat bibendum diam, eu varius nisl accumsan vel. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec eu malesuada magna, non pharetra odio. Quisque risus ante, tincidunt a interdum sed, feugiat porta ante. Cras at eros tortor.
    </div>
    <div class="body">
      This content should scroll:<br><br>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nulla non erat laoreet laoreet a et augue. Phasellus convallis, elit in commodo ultricies, mi nulla ultricies erat, non dictum massa orci at sem. Donec condimentum sit amet nisl tempor dictum. Nulla scelerisque, odio id malesuada viverra, lectus erat consequat nisl, ut pulvinar nibh mauris ac nisi. Quisque mauris nisl, sodales eu mattis at, congue et diam. Morbi ac nisl auctor, placerat est vitae, pharetra nisl. Suspendisse rhoncus nulla ut neque rhoncus molestie. Praesent sit amet laoreet turpis, ut imperdiet purus. Suspendisse dignissim enim et metus hendrerit, sit amet aliquam orci venenatis. Sed porttitor eu erat viverra pharetra. Aliquam laoreet velit enim, ut sollicitudin nisl pretium eu.Curabitur nec augue pulvinar, sodales felis vitae, molestie odio. Sed quis dapibus est, ac hendrerit elit. Etiam scelerisque lacinia justo, quis sodales sapien luctus at. Praesent a interdum purus, et lobortis arcu. Phasellus luctus risus nec tortor condimentum pretium. Integer ante odio, malesuada eget risus id, adipiscing luctus nunc. Sed mollis leo in dui rutrum congue. Etiam justo risus, scelerisque et metus porta, dignissim sodales urna.Ut porttitor faucibus ipsum sit amet dapibus. Phasellus euismod eu libero sit amet euismod. Proin dolor nisl, suscipit quis commodo non, luctus quis enim. Donec justo ante, facilisis vehicula mauris viverra, pretium tempus purus. Praesent mollis nisl vel diam scelerisque lacinia. Vestibulum semper sem vitae interdum porta. Vestibulum commodo, erat adipiscing faucibus rhoncus, massa diam pulvinar mauris, a varius velit diam eu orci. Praesent scelerisque enim nec urna elementum luctus.Aenean luctus at sem vitae varius. Donec ullamcorper gravida sapien, sit amet aliquam quam ultricies euismod. Nam vel massa at sapien eleifend feugiat. Mauris non sem ac mauris iaculis fermentum id sit amet nibh. Sed commodo augue a semper convallis. Pellentesque vestibulum euismod molestie. Praesent consectetur neque adipiscing, malesuada arcu ut, bibendum quam. Aenean eget odio magna. Vivamus sit amet ultrices tortor. Mauris cursus adipiscing interdum. Vivamus in iaculis urna, id sollicitudin enim. Maecenas at vestibulum lorem. Nulla mauris quam, tincidunt ut velit et, mollis venenatis libero. Vivamus id interdum ligula. Curabitur in vestibulum nisi, eu imperdiet ante.Curabitur ac lobortis magna. Vivamus eu ante quis velit elementum euismod. Nulla eget ornare velit, tempus porttitor justo. In at nisi venenatis metus suscipit ultricies. Sed vel nisl lectus. Ut feugiat consequat eros ut gravida. In hac habitasse platea dictumst. Etiam placerat bibendum diam, eu varius nisl accumsan vel. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec eu malesuada magna, non pharetra odio. Quisque risus ante, tincidunt a interdum sed, feugiat porta ante. Cras at eros tortor.
    </div>
  </div>
  <div class="sidebar">
    This content should not scroll:<br><br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nulla non erat laoreet laoreet a et augue. Phasellus convallis, elit in commodo ultricies, mi nulla ultricies erat, non dictum massa orci at sem. Donec condimentum sit amet nisl tempor dictum. Nulla scelerisque, odio id malesuada viverra, lectus erat consequat nisl, ut pulvinar nibh mauris ac nisi. Quisque mauris nisl, sodales eu mattis at, congue et diam. Morbi ac nisl auctor, placerat est vitae, pharetra nisl. Suspendisse rhoncus nulla ut neque rhoncus molestie. Praesent sit amet laoreet turpis, ut imperdiet purus. Suspendisse dignissim enim et metus hendrerit, sit amet aliquam orci venenatis. Sed porttitor eu erat viverra pharetra. Aliquam laoreet velit enim, ut sollicitudin nisl pretium eu.Curabitur nec augue pulvinar, sodales felis vitae, molestie odio. Sed quis dapibus est, ac hendrerit elit. Etiam scelerisque lacinia justo, quis sodales sapien luctus at. Praesent a interdum purus, et lobortis arcu. Phasellus luctus risus nec tortor condimentum pretium. Integer ante odio, malesuada eget risus id, adipiscing luctus nunc. Sed mollis leo in dui rutrum congue. Etiam justo risus, scelerisque et metus porta, dignissim sodales urna.Ut porttitor faucibus ipsum sit amet dapibus. Phasellus euismod eu libero sit amet euismod. Proin dolor nisl, suscipit quis commodo non, luctus quis enim. Donec justo ante, facilisis vehicula mauris viverra, pretium tempus purus. Praesent mollis nisl vel diam scelerisque lacinia. Vestibulum semper sem vitae interdum porta. Vestibulum commodo, erat adipiscing faucibus rhoncus, massa diam pulvinar mauris, a varius velit diam eu orci. Praesent scelerisque enim nec urna elementum luctus.Aenean luctus at sem vitae varius. Donec ullamcorper gravida sapien, sit amet aliquam quam ultricies euismod. Nam vel massa at sapien eleifend feugiat. Mauris non sem ac mauris iaculis fermentum id sit amet nibh. Sed commodo augue a semper convallis. Pellentesque vestibulum euismod molestie. Praesent consectetur neque adipiscing, malesuada arcu ut, bibendum quam. Aenean eget odio magna. Vivamus sit amet ultrices tortor. Mauris cursus adipiscing interdum. Vivamus in iaculis urna, id sollicitudin enim. Maecenas at vestibulum lorem. Nulla mauris quam, tincidunt ut velit et, mollis venenatis libero. Vivamus id interdum ligula. Curabitur in vestibulum nisi, eu imperdiet ante.Curabitur ac lobortis magna. Vivamus eu ante quis velit elementum euismod. Nulla eget ornare velit, tempus porttitor justo. In at nisi venenatis metus suscipit ultricies. Sed vel nisl lectus. Ut feugiat consequat eros ut gravida. In hac habitasse platea dictumst. Etiam placerat bibendum diam, eu varius nisl accumsan vel. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec eu malesuada magna, non pharetra odio. Quisque risus ante, tincidunt a interdum sed, feugiat porta ante. Cras at eros tortor.
  </div>

</div>

Answer 2

I created a simple fiddle, that doesn't use calc (support isn't great - http://caniuse.com/calc, and then there's the big unknown of any performance penalty you may/may not hit using it..)

It's very straight forward, using simple CSS.

http://jsfiddle.net/ruYGH/3/

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

#header,
#content {
  left: 0;
  overflow-y: scroll;
  position: absolute;
  right: 200px;
  top: 0;
}

#header {
  background-color: red;
  height: 100px;
}

#content {
  background-color: white;
  bottom: 0;
  top: 100px;
}

#sidebar {
  background-color: blue;
  bottom: 0;
  color: white;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  width: 200px;
}

<div id="header">
  <!-- Courtesy of cheese ipsum -->
    I love cheese, especially cheeseburger monterey jack. Roquefort taleggio cut the cheese when the cheese comes out everybody's happy parmesan cheesy feet squirty cheese st. agur blue cheese. Hard cheese roquefort goat parmesan caerphilly ricotta feta swiss. Cheese strings red leicester manchego red leicester stinking bishop boursin manchego ricotta. Port-salut fondue cheese strings boursin babybel gouda cow when the cheese comes out everybody's happy. Chalk and cheese ricotta queso fromage roquefort cheeseburger cow emmental. Hard cheese goat cheddar cheesecake paneer caerphilly gouda cheese and biscuits. Cheesecake taleggio lancashire when the cheese comes out everybody's happy caerphilly cheeseburger croque monsieur cheeseburger. Manchego goat edam croque monsieur stilton manchego taleggio jarlsberg. Fondue croque monsieur chalk and cheese bocconcini swiss who moved my cheese.

Fondue fromage frais dolcelatte. Boursin danish fontina cheese and wine airedale ricotta who moved my cheese rubber cheese who moved my cheese. Dolcelatte cheesecake stilton cheese triangles cheddar parmesan mascarpone cheeseburger. Rubber cheese say cheese everyone loves cut the cheese goat who moved my cheese cow cream cheese. Everyone loves brie fondue who moved my cheese cheddar croque monsieur airedale mascarpone. Mascarpone pepper jack camembert de normandie croque monsieur mascarpone mascarpone halloumi mascarpone. Cheesy feet who moved my cheese dolcelatte cheese triangles cottage cheese danish fontina cheeseburger caerphilly. Mozzarella taleggio cheesy grin boursin monterey jack smelly cheese stilton camembert de normandie. Babybel fromage parmesan danish fontina cream cheese monterey jack pecorino cauliflower cheese. Babybel stinking bishop cheesecake emmental.

Squirty cheese cream cheese cheese slices. Ricotta dolcelatte boursin ricotta cheeseburger dolcelatte croque monsieur st. agur blue cheese. Cream cheese everyone loves emmental danish fontina jarlsberg jarlsberg stinking bishop cheddar. Cheesy feet stilton ricotta the big cheese cheese on toast camembert de normandie monterey jack cheesecake. Rubber cheese brie swiss edam cheeseburger monterey jack cheese triangles swiss. Cheese strings emmental queso cheese and wine cheddar bocconcini cheese slices jarlsberg. Queso st. agur blue cheese cheese slices boursin edam pecorino goat mozzarella. Taleggio who moved my cheese ricotta brie fondue cauliflower cheese cream cheese blue castello. Babybel who moved my cheese caerphilly pecorino when the cheese comes out everybody's happy roquefort st. agur blue cheese macaroni cheese. Cheesecake brie cream cheese stilton swiss roquefort cheese triangles cheddar. Blue castello cheese triangles pecorino camembert de normandie swiss.

Stinking bishop boursin roquefort. Smelly cheese squirty cheese gouda cheesecake airedale goat squirty cheese the big cheese. Say cheese stilton pecorino cut the cheese cheesy grin everyone loves stilton cheesy feet. Fondue bavarian bergkase cauliflower cheese smelly cheese caerphilly bocconcini who moved my cheese cheese and wine. St. agur blue cheese lancashire jarlsberg fromage say cheese fromage caerphilly cheese on toast. Swiss croque monsieur monterey jack blue castello gouda emmental fondue brie. Macaroni cheese gouda chalk and cheese red leicester lancashire who moved my cheese cheese and wine cheddar. Swiss fromage frais emmental emmental cottage cheese edam monterey jack cheeseburger. Everyone loves port-salut who moved my cheese chalk and cheese everyone loves cauliflower cheese stinking bishop airedale. Say cheese stilton cheesecake gouda st. agur blue cheese cream cheese stinking bishop ricotta. Halloumi taleggio bavarian bergkase jarlsberg cheese triangles cheesy grin.

Cut the cheese boursin gouda. Stilton cottage cheese cheesy feet boursin stilton danish fontina cheese slices macaroni cheese. Bocconcini babybel roquefort everyone loves dolcelatte emmental boursin mascarpone. Mozzarella edam rubber cheese roquefort cheese and wine monterey jack cheeseburger cheesecake. Brie roquefort cheese and wine cheese slices jarlsberg roquefort mascarpone pepper jack. Airedale manchego roquefort swiss blue castello cheeseburger fromage frais fromage frais. Pecorino who moved my cheese caerphilly cheesy grin stinking bishop bavarian bergkase cheesy feet cauliflower cheese. Fondue boursin chalk and cheese bocconcini taleggio boursin mascarpone mascarpone. Mozzarella macaroni cheese red leicester smelly cheese everyone loves stinking bishop cheese on toast cream cheese. Red leicester cow caerphilly cheddar macaroni cheese pecorino cow swiss. Cut the cheese cow cheddar camembert de normandie danish fontina stilton say cheese.
</div>
<div id="content">
    <!-- Courtesy of cheese ipsum -->
    I love cheese, especially cheeseburger monterey jack. Roquefort taleggio cut the cheese when the cheese comes out everybody's happy parmesan cheesy feet squirty cheese st. agur blue cheese. Hard cheese roquefort goat parmesan caerphilly ricotta feta swiss. Cheese strings red leicester manchego red leicester stinking bishop boursin manchego ricotta. Port-salut fondue cheese strings boursin babybel gouda cow when the cheese comes out everybody's happy. Chalk and cheese ricotta queso fromage roquefort cheeseburger cow emmental. Hard cheese goat cheddar cheesecake paneer caerphilly gouda cheese and biscuits. Cheesecake taleggio lancashire when the cheese comes out everybody's happy caerphilly cheeseburger croque monsieur cheeseburger. Manchego goat edam croque monsieur stilton manchego taleggio jarlsberg. Fondue croque monsieur chalk and cheese bocconcini swiss who moved my cheese.

Fondue fromage frais dolcelatte. Boursin danish fontina cheese and wine airedale ricotta who moved my cheese rubber cheese who moved my cheese. Dolcelatte cheesecake stilton cheese triangles cheddar parmesan mascarpone cheeseburger. Rubber cheese say cheese everyone loves cut the cheese goat who moved my cheese cow cream cheese. Everyone loves brie fondue who moved my cheese cheddar croque monsieur airedale mascarpone. Mascarpone pepper jack camembert de normandie croque monsieur mascarpone mascarpone halloumi mascarpone. Cheesy feet who moved my cheese dolcelatte cheese triangles cottage cheese danish fontina cheeseburger caerphilly. Mozzarella taleggio cheesy grin boursin monterey jack smelly cheese stilton camembert de normandie. Babybel fromage parmesan danish fontina cream cheese monterey jack pecorino cauliflower cheese. Babybel stinking bishop cheesecake emmental.

Squirty cheese cream cheese cheese slices. Ricotta dolcelatte boursin ricotta cheeseburger dolcelatte croque monsieur st. agur blue cheese. Cream cheese everyone loves emmental danish fontina jarlsberg jarlsberg stinking bishop cheddar. Cheesy feet stilton ricotta the big cheese cheese on toast camembert de normandie monterey jack cheesecake. Rubber cheese brie swiss edam cheeseburger monterey jack cheese triangles swiss. Cheese strings emmental queso cheese and wine cheddar bocconcini cheese slices jarlsberg. Queso st. agur blue cheese cheese slices boursin edam pecorino goat mozzarella. Taleggio who moved my cheese ricotta brie fondue cauliflower cheese cream cheese blue castello. Babybel who moved my cheese caerphilly pecorino when the cheese comes out everybody's happy roquefort st. agur blue cheese macaroni cheese. Cheesecake brie cream cheese stilton swiss roquefort cheese triangles cheddar. Blue castello cheese triangles pecorino camembert de normandie swiss.

Stinking bishop boursin roquefort. Smelly cheese squirty cheese gouda cheesecake airedale goat squirty cheese the big cheese. Say cheese stilton pecorino cut the cheese cheesy grin everyone loves stilton cheesy feet. Fondue bavarian bergkase cauliflower cheese smelly cheese caerphilly bocconcini who moved my cheese cheese and wine. St. agur blue cheese lancashire jarlsberg fromage say cheese fromage caerphilly cheese on toast. Swiss croque monsieur monterey jack blue castello gouda emmental fondue brie. Macaroni cheese gouda chalk and cheese red leicester lancashire who moved my cheese cheese and wine cheddar. Swiss fromage frais emmental emmental cottage cheese edam monterey jack cheeseburger. Everyone loves port-salut who moved my cheese chalk and cheese everyone loves cauliflower cheese stinking bishop airedale. Say cheese stilton cheesecake gouda st. agur blue cheese cream cheese stinking bishop ricotta. Halloumi taleggio bavarian bergkase jarlsberg cheese triangles cheesy grin.

Cut the cheese boursin gouda. Stilton cottage cheese cheesy feet boursin stilton danish fontina cheese slices macaroni cheese. Bocconcini babybel roquefort everyone loves dolcelatte emmental boursin mascarpone. Mozzarella edam rubber cheese roquefort cheese and wine monterey jack cheeseburger cheesecake. Brie roquefort cheese and wine cheese slices jarlsberg roquefort mascarpone pepper jack. Airedale manchego roquefort swiss blue castello cheeseburger fromage frais fromage frais. Pecorino who moved my cheese caerphilly cheesy grin stinking bishop bavarian bergkase cheesy feet cauliflower cheese. Fondue boursin chalk and cheese bocconcini taleggio boursin mascarpone mascarpone. Mozzarella macaroni cheese red leicester smelly cheese everyone loves stinking bishop cheese on toast cream cheese. Red leicester cow caerphilly cheddar macaroni cheese pecorino cow swiss. Cut the cheese cow cheddar camembert de normandie danish fontina stilton say cheese.
</div>
<div id="sidebar">
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>    
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>
    I don't overflow<br/>

</div>

Answer 3

Style the divs with "overflow" to put the scroll bars where you want them and prevent them where you don't want them. You will also use overflow to specify what you want to happen to your content if it should happen to be too big to fit in your fixed width areas.

Chris Coyer is always a knowledgeable CSS resource

As far as the layout goes, it is a walk in the park if you use a two column table with rowspan="2" on the second column of the first row and only one column in the second row.

If you don't want to use tables (there is no good reason not to, but there are thousands of people that will look down on you if you do) then look at using divs with style="display: table...."

Once again Chris Coyer has an explanation

Thanks for the fiddle, your overflow css is working it is just that your header and content divs are 100% wide (full screen) and the scroll bars are conceptually under the sidebar. I need to sell you on using that table layout so that you can "dynamically" fix your dimensions so that the browser can know when to scroll instead of expanding the content down indefinitely to fit the size of the content instead of overflowing with the scroll bar.