Extending left column

Here's is a preview of the site:

http://www.sportsgfx.net/tests/css/usc/con/

What I needed was that the content box and blue bar on the left stretched when more content was added. This means I can't use a fixed height. The height was originally 900px for the content, and 880px for the blue bar. This should be the minimum, so I set the min-height for both divs.

The content box stretched perfectly, but the blue side panel doesn't seem to want to go past its min-height. I want it to go all the way to the bottom (the bottom margin and stuff can be changed after).

I set #bluenav to height: 100%, hoping it would go all the way down, but that doesn't work.

I'm not sure what to do. Can anyone help?

you are experiencing a very common problem. the solutions are limited. the easiest being to use a faux column.

a couple of notes:
underline text should only be used for hyperlinks.
and you shouldn't use the <font> or <center> tags. use css!

for the "name:" and "email:" on your form, use <label> tag

http://www.sportsgfx.net/tests/css/u...content_bg.jpg

include the sidebar in that graphic

I don't know, I don't think faux columns are the route I want to go, with all the playing around with background images and everything.

If I remember correctly, there was a method of doing faux columns using a negative padding and a positive margin. I did it on my site...I'll take a look at the CSS and get back to you...

@sunstar13
if you don't like faux columns, then what would you suggest as an alternative?

here is how I did it on my site...

Unfortunately, I lost the link to the article where I learned this trick from, but it is working for my site, so I really don't care why it works.. .

Originally Posted by Dark_Prince11 here is how I did it on my site... Code: .column1{ height:100%; padding-bottom:2000px; margin-bottom:-2000px; overflow:hidden; } .column2{ height:100%; padding-bottom:2000px; margin-bottom:-2000px; overflow:hidden; } Unfortunately, I lost the link to the article where I learned this trick from, but it is working for my site, so I really don't care why it works.. .

...tried it on his site...didn't work.

do .column1 and .column2 need to be siblings?

I have them both in a wrapper div. They work fine for me...I'll see if I can dig out that article...

Eureka! I found the article....or something similar to it!
http://www.positioniseverything.net/...ut/equalheight


Put it in a wrapper div and make sure you set the correct numbers if you have padding in those columns.

Originally Posted by Dark_Prince11 I have them both in a wrapper div. They work fine for me...I'll see if I can dig out that article... Eureka! I found the article....or something similar to it! http://www.positioniseverything.net/...ut/equalheight Put it in a wrapper div and make sure you set the correct numbers if you have padding in those columns.

Thanks for posting that link. that is really cool.