CSS about two column layouts

Question

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

I want to do the following:

• When the height of the div content exceeds the height of the screen size, the scroll bar only exists in the content div. Users can scroll only the contents of a div, but the sidebar keeps static

• Two columns must be the same height.

  My layout:

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

<------------------- title ------------------>

<----- sidebar -------> <--------- contents --->

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

<--- end of container ------------------------->

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

Thanks/

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> 

This will give you a page where the main div cannot scroll, but there can be two div columns. They will be side by side. You asked the question is not entirely clear, therefore, I hope this is what you were.

EDIT: in response to showing an example site.

Your problem is very simple.

All your divs have a height rule of height: 100%; When you use the percentage height, you make it as a percentage of the container in which it is located, i.e. Its parent container. This is not the percentage height of the entire window.

Per container height is indicated in each container, so the result is equal to height 0. Give your outer div a fixed height, and the problem will be solved.

Additional editing:

If you are interested in the outer edge of the div always stretching 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 the calculated height, even if the outer div does not have a hard coded height. This will allow you to use percentage heights on your inner divs and maintain an outer div that extends from the top to the bottom of the visible window.

Answer 2

You will need to set your container element to overflow:hidden; , and your content div is on overflow:scroll; (and possibly do overflow-x:hidden; to hide the horizontal scrollbar). The problem is that if your sidebar and content are the same height, then you will have to have two scroll bars - one for the content and one for the sidebar.

You can probably solve this problem by using a different container element for the sidebar and content only, and set overflow: scrollbar; overflox-x:hidden; overflow: scrollbar; overflox-x:hidden; instead of sidebar / content.

Answer 3

You can also use display:table and display:table-cell to create columns if you are having difficulty 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 HTML:

 <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 does not work in some older browsers.