Jump to content

Problems With The Footer


grindy

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.

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.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...