Follow up to first question CSS, FOOTER is floating to the top

Question

ok this header image is driving me crazy-- ive cleaned up the divs and edited the css - before i learn positioning etc, id love to see a quick fix that just puts that image down at the bottom of the page

sorry, the question was in the title-- im trying to get the footer not to float on top of the page but ive gotten some responses about absolute positioning so ill try and work on that myself, additional answers still appreciated, thanks

http://we-live.in/the%5Fsierra

<div style="text-align:center;">

  <div id="footernav">
  <a href="index.php" class="footerlink">Home</a>
  <a href="about.php" class="footerlink">About Us</a>
  <a href="mailto:[email protected]"  class="footerlink end">Contact Us</a>

  </div>

Answer 1

Your main content div appears to be the div with the id "to_div". Your footer floats to the top because you've used position:absolute on to_div which takes it out of the flow. Either absolutely position your div on the bottom or stop using absolutely positioning. I recommend the latter.

Answer 2

That happens because you have set up to absolute the position of each div (to_text, nav_deals, etc.) but the div that contains the footer is rendered as a normal div element (because its position is not absolute)!

I suggest to redo this simple layout without the absolute positioning! Or you can solve by setting to absolute even the position of the last div!

Answer 3

The problem is that you are using absolutes. Absolutes do not affect the flow (in other words for the positioning of other elements it's as if they don't exist).

Do something like this (I've put the css as text)

<div id="wrapper">
     <div id = "main">
          <div id="to">FLOAT:LEFT</div>
          <div id="from">FLOAT:RIGHT</div>
          <p class="extro">CLEAR:BOTH</p>
     </div>
<div id="footer"></div>
</div>