I am new to creating layouts with CSS (I haven’t been involved in web design for a long time) and I can’t figure out how to get the page footer to display at the bottom I want.
Requirements: -Display at the bottom of the content if the content exceeds the vertical size of the viewport -Display at the bottom of the viewport if the viewport exceeds the vertical size of the content.
The code I use sets the footer at the bottom of the viewport, but if the browser is smaller than the content, it just closes the content.
the code:
<div style="background-image:url(footer_bg.jpg); background-position:bottom; background-repeat:repeat-x; height:235px; width:100%; bottom:0px; position:absolute;"></div>
My main goal is to have a footer with text (i.e. company information, contact information) and a background gradient. I would like the footer background to span the width of the page, but I don't know if I can do this with 960 gs divs.
EDIT: I would like to do this with all CSS, without scripts, if possible.
I found some good code to get the CSS footer at this link:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
The main problem that I have encountered in the implementation right now with 960gs is float:left;in CSS 960gs. It seems that this is preventing my grids from vertically expanding the parent <div>. However, if I delete the float, 960gs doesn't seem to work either.
. "a" grid_7 suffix_1, "b" grid_4 container_12. , .