Question

I have, what I estimate, to be a simple problem. I have a side bar on my page with its own unique color and I would like it to grow and shrink based on the text in the main content area so that it stretches from the nav bar to the footer. I tried setting a height on it but that just forces the whole content area to have tons of white space at the bottom. I would like for the height of the sidebar to be dictated by the amount of content in the main area.

Here is the CSS for the sidebar (if I need to post more code please let me know):

.LeftSidebar
{
float: left;
background-color: #1b619c;
color: White;
width: 175px;
text-align: center;
padding: 20px;
clear:both;
}

I am still trying to learn so any help would be appreciated. Thanks in advance!

Answer 1

What you are looking for is a css column. There are a couple of options you could go with a css wrapper that sets the three column layout or two column layout. I would refer you to the following website:

http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm

Or if you are using CSS3 markup then you could also use the display:table and display:table-cell markup to set your columns. Please refer to this site:

http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

div#ContentWrapper { display: table; }
div#LeftSidebar { display: table-cell; }
div#MainContent { display: table-cell; }

I am showing ID’s because the only time you should be using a class is when there are multiple references to that class on the same page.

However it’s going to be a bit more complicated than just modifying the css for the sidebar column.