html layout with only part of the page scrolling

Question

I want to create an page layout that is split into 3 parts - one column with fixed width that contain two rows with fixed height. and another column with fixed width, that can potentially contain multiple items (more than fit into view).

I'm looking for a way to make the page scrolling only affect the items column, so that the left side of the screen (first column) remains on view.

Here is a sample image of the layout to better illustrate the meaning:

Answer 1

Apply overflow:autofor your right side columns. Look at the following sample HTML.

<div style="width:450px;">
  <div style="float:left; width:300px">
       <div style="height:120px; border:1px solid #ff00ff;">Testing Content</div>
       <div style="height:200px; border:1px solid #fff000;">Sample INformation</div>    
  </div>
 <div style="float:right; width:100px; height:320px; overflow:auto;">
   <p>items</p>
   <p>items</p>
   <p>items</p>
   <p>items</p>
   <p>items</p>
   <p>items</p>
   <p>items</p>
   <p>items</p>
   <p>items</p>
   <p>items</p>
  </div>
</div>

SAMPLE DEMO

Answer 2

You can use frame or fix the position of left column.

.left
{
    position:fixed;
}

Answer 3

Why not float your items container right, then have a left column which is position:fixed?

	.left { position:fixed;width:70% }
	.right { float:right;width:30%; }

	<div>
		<div class="left">
			This content is fixed and does not scroll
		</div>
		<div class="right">
			<ul>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
				<li>item></li>
			</ul>
		</div>
	</div>