CSS about two column layout

Question

I have never thought that writing a simple two column layout is so complicated using css....haha

What I want to do is the following:

1. When the height of the content div exceed the height of screen size, scroll bar exist only in the content div. The users can only scroll the content div but the sidebar keeps static

2. The two columns should have the same height

   My layout is:

<---------------container------------------->

<-------------------header------------------>

<-----sidebar-------><---------content--->

<------------------footer------------------->

<---End of container------------------------->

Here is my css file: http://137.189.145.40/c2dm/css/main.css

Thank you/

Answer 1

#WorldContainer
{
     width: 1000px;
     margin: auto;
     overflow: hidden;
}

.ContentColumn
{
     float: left;
     width: 500px;
     overflow: auto;
}

<div id="WorldContainer">
   <div class="ContentColumn">
        Content goes here!
   </div>
   <div class="ContentColumn">
        Content goes here!
   </div>
</div>

That will give you a page where the main div cannot scroll but the two div columns can. They will be side by side. You question wasn't exactly clear so hopefully this is what you were after.

EDIT: In response to you showing the example site.

Your problem is really simple.

All of your divs have a height rule of height: 100%; When you use percentage height, you are making it a percent of the container it is within, i.e Its parent container. It is NOT a percentage height of the entire window.

Every container is specifying a percentage height so the result is a height of 0. Give your outermost div a fixed height and the problem will be resolved.

Additional Edit:

If you are concerned with making sure the outermost div always stretches to the bottom of the window then this is a css solution using absolute positioning:

#OutermostDiv
 {
    position: absolute;
    top: 0;
    bottom: 0;
 }

Using this approach still causes a calculated height even though the outer div doesn't have a hard coded height. This will allow you to use percentage heights on your inner divs and maintain a outer div that stretches from top to the bottom of the visible window.