Question

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.

Answer 1

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 }