Q: Why are my Div's overlapping? I can't figure out how to stop the #body div from overlapping with the #leftnav div.
Trying to  set up the page layout. Also if you have any other recommendations for what I have so far that would be appreciated!
html {
    background-color: light-grey;
}

#container {
    width: 900px;
    margin: auto;
}

#header {
    width: 900px;
    font-family: 'Emblema+One', 'arial',sans-serif; 
    font-size: 4em;  
    text-align:center;
}

a {
    color: #000;
}

a:hover {
    color: red;
}

a:visited {
    color: purple; 
}

.nav {
    width: 900px;
    border:1px solid #000;
    border-width:1px 0;
    list-style: none;
    margin:0;
    padding:0;
    text-align:center;
}

.nav li {
    display: inline;
}

.nav a {
    display: inline-block;
    padding: 0 15px;
    text-decoration:none;
}

#leftnav {
    border-left: 1px solid black; 
    border-right: 1px dotted black; 
    float: left;
    width: 140px;
    height: 400px;
}

#rightnav {
    border-left: 1px dotted black; 
    border-right: 1px solid black; 
    float: right;
    width: 140px;
    height: 400px;
}

#body {
    background-color: grey;
    border: 1px solid black;
    width: 620px; 
    height: 400px;
}

#footer {
    clear: both;
    border: 1px solid black;
    width: 900px;
    height: 100px;
}

EDIT: Added HTML
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Cupcakes</title>
        <link rel="stylesheet" style="text/css" href="style.css">
        <link href='http://fonts.googleapis.com/css?family=Emblema+One' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div id="container">
        <h1 id="header">Cupcakes</h1>
            <ul class="nav">
                <li><a href="www.cupcakes.com">Home</a></li>
                <li><a href="www.cupcakes.com/about">About</a></li>
                <li><a href="www.cupcakes.com/creations">Creations</a></li>
                <li><a href="www.cupcakes.com/contact">Contact</a></li>
            </ul>
        <div id="leftnav"></div>
        <div id="rightnav"></div>
        <div id="body"></div>
        <div id="footer"></div>
        </div>
    </body>
</html>


A: As I said in the comment it's a problem with the Floats and Clear property,  you need to clear in the #body is the element after the floats who needs to clear:
#body {
  clear:both;
}

Check the Demo
Edit
My mistake when I've looked more closer into your code I see you are trying to get the #body between the floated elements. If you want to keep working that way you can:


*

*Assign a margin-left equal to the height of the left navbar:
#body {
 margin-left:140px;
}

It ends like This http://jsfiddle.net/tbHF9/1/

*Or you  can let the #body take that space with width:100% the content will respect the space of the floated elements:
#body {
  width:100%;
}

It ends like this http://jsfiddle.net/tbHF9/2/

A: You're not clearing your floats properly. I'd strongly recommend checking out this article http://css-tricks.com/snippets/css/clear-fix/. Using the CSS from this article, wrap your floating elements in a div with the 'clearfix' or 'group' class. 
