Fluid webpage layout with CSS

[ADayLate]

Currently I have a layout of a webpage with a header, then three columns and footer. The footer currently does not sit at the bottom of the webpage. It sits below the last line in one of the columns. If I keep putting more breaks in the column, the footer will go all the way down to the bottom of the page, but that would ruin the point of it being fluid. Is there a way to do this in CSS so the footer always stays in the same spot as long as your information doesn't make the page have to scroll. I know you can do this with absolute positioning, but doesn't that ruin fluid websites?

To let you know that I am fairly new to all of this, so if I sound like I don't know what I am talking about, I apologize. Thanks for your help.

 

[Vragabond]

If you float columns and clear the footer, footer will reside at the bottom of the highest (longest) column. I do believe that is the effect you're looking for. Without seeing any code, this is as good as I can help.

 

[ADayLate]

Vragabond,

Thanks for the reply. I had used some of this code from a book I have been reading, so hopefully it is somewhat correct. That is the effect that I am looking for, but the problem that I have is that my three columns will not have enough material at this point to push the footer all the way to the bottom of the page. I didn't know if I could specifiy the footer to stay there stationary, but keep the page fluid since my company has people on different screen resolutions. Sometimes I try to be to nit picking, so let me know if I should worry about this.

<style type="text/css">
#masthead {width: 100%;}
#nav {float: left; width: 25%;}
#content {float: left; width: 50%;}
#sidebar {float: left; width: 25%;}
#footer {width: 100%; clear: both;}
</style>

 

[Vragabond]

So you want to have the page span across the whole height of the screen (ie footer always at the bottom) but if there is more content overflow the page and push the footer down. This is possible by applying 100% height to html and body elements. From there on, IE will accept 100% height for the container and others will use min-height. That's basically the technique.