Jump to content

Problems With The Footer


grindy
 Share

Recommended Posts

for some reason my footer on my web page attaches itself to the bottom of the header, the only way i can put it at the bottom of the page is by using margin. why wont it attach itself by default to the bottom of my two columns.i have it like this<div id="container"><div id="header"></div><div id="col1"></div><div id="col2"></div><div id="footer"></div></div> end of container divhere is the css for it body { font: 100% Verdana, Arial, Helvetica, sans-serif; background-image:url("images/skystrip2.gif"); margin: 0; padding: 0; text-align: center; color: #ffffff; } #container { width: 78%; height: 700px; margin: 0px auto; text-align: left; border: 1px solid #fff; border-width: 1px 1px 1px 1px; } #header { width: 100%; height: 70px; border: 1px solid #fff; border-width: 1px 1px 1px 1px; text-align: center; } #col1 { float: left; width: 25%; height: 545px; border: 1px solid; border-width: 1px 1px 1px 1px; color: #fff; } #col2 { float: left; width: 74.4%; height: 545px; border: 1px solid; border-width: 1px 1px 1px 1px; color: #fff; } #footer { position: absolute; clear: both; width: 100%; height: 36px; padding: 0px 0px 0px 0px; border: 1px solid #fff; border-width: 1px 1px 1px 1px; text-align: center; } fltrt { float: right; margin-left: 8px; } fltlft { float: left; margin-right: 8px; }the footer should position itself at the bottom of the two columns, not at the bottom of the headerI have the header width at 100% and it makes itself 100% of the container.I have the footer width at 100% and it makes itself 100% of the body instead of the containerIts almost as if the footer isn't in the container. seems like its in the body portion of the page.also, when i put an inline frame in column 2, the footer disapears completely.

Edited by grindy
Link to comment
Share on other sites

position: absolute's not going to help the situation any. That's exactly why it won't do what you want it to do; appearing outside of the container. Also, block level elements will take up the available width of their containing element by default. Perhaps looking up CSS tutorials; on the box model and positioning.

Edited by thescientist
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...