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.

Answer 2

You'd have to set your container element to overflow:hidden;, and your content div to overflow:scroll; (and possibly do overflow-x:hidden; to hide the horizontal scrollbar). The problem with this is that if your sidebar & content are going to be the same height, then you would have to have TWO scrollbars - one for content, and one for sidebar.

You could probably solve this by using another container element around just sidebar & content, and setting the overflow: scrollbar; overflox-x:hidden; on it instead of sidebar/content.

Answer 3

You can also use display:table and display:table-cell to create columns if you're facing difficulties with float. Here's the CSS:

#container
{
width:960px;
margin:0;
padding:0;
display:table;
}
#sidebar
{
width:300px;
display:table-cell;
}
#content
{
width:660px;
display:table-cell;
}

and the HTML is:

<div id="container">

<div id="sidebar">
<!-- Sidebar Content Here -->
</div>

<div id="content">
<!-- Content Here -->
</div>

</div>

Hope this solves your problem. But display:table doesn't work in some old browsers.