2

Hello I am writing a site using Aptana Studio 3 I at this stage have 1 <div> for content one <nav> for site navigation and one <footer> containing a simple copyright. I am currently experimenting with 

float:left;
float:right;

This has caused my <footer> to jump to the very top of the page and it won't leave, please help me find a solution which doesn't involve position:absolute; or failing that a way for the absolute position to be centred.

George Bora
  • 1,618
  • 6
  • 26
  • 45

1 Answers1

3

You have to wrap your <nav> and content <div> in a wrapper and add a CSS rule to wrapper overflow: hidden - http://jsfiddle.net/7kpuH/

UPDATE: for the footer that sticks to the very bottom of the page you might want to loo here - Problems with CSS sticky footer

<section>
    <div id="content">
        content
    </div>

    <nav>
        navigation
    </nav>    
</section>

<footer>
    footer
</footer>

CSS

section, footer { width: 500px; margin: 0 auto; background: #eee; }
section { overflow: hidden }

#content { background: orange; width: 250px; float: left; padding: 20px; }
nav { background: beige; width: 150px; float: right; padding: 20px; }

footer { padding: 20px 0; border-top: 5px solid #fff }
Community
  • 1
  • 1
Zoltan Toth
  • 46,981
  • 12
  • 120
  • 134
  • Doesnt he want the footer to be underneath the content? Your example in jsFiddle is pushing it to the right of it – Samjus Jan 13 '12 at 17:44
  • 1
    @Samjus I've checked in Safari, Chrome and FF both on Mac and PC - the footer stays underneath the `section` – Zoltan Toth Jan 13 '12 at 17:48
  • You win haha. I totally forgot I was using IE 8 because work doesn't allow other browsers. Good job :) – Samjus Jan 13 '12 at 17:50
  • This works the footer is below the wrapper, I just used the `overflow: hidden;` part but is there a solution for it to be at the very bottom of the page and not just bellow the wrapper? – George Bora Jan 13 '12 at 17:52
  • I have updated the answer with a link to the sticky footer thread – Zoltan Toth Jan 13 '12 at 17:55
  • Sorry but the CSS which was linked in that question, didn't help at all when I applied it to my `
    ` #wrapper alongside overflow hidden the footer still appeared right at the bottom of the wrapper. And when I tried without the overflow the footer disappeared covered up I believe by the wrapper.
     – George Bora Jan 13 '12 at 18:38
  • you don't just copypaste and expect it to work, you have to change the elements, id-s, classes accordingly and then - http://jsfiddle.net/8g87D/ – Zoltan Toth Jan 13 '12 at 18:49
  • Thank you this, I'll experiment more with this and I have modified it I mostly use classes where you use id's etc it's just that in those links I said there were other solutions than your last one which left out the negative margin top on the
    .
     – George Bora Jan 13 '12 at 20:07