floating divs not sitting properly - html

Question

The problem i am having is the footer div keeps going up behind the the right hand side div. i have a middle containing div with the 2 floated div's side by side and the footer is a separate div not to sure where i have gone wrong here but i have been at it for hours and cant work out the problem.
Here is a js fiddle of what i mean: http://jsfiddle.net/VU3xW/
HTML:
<div id="middlecontainer">
<div id="leftContent">
</div> <!-- end of left content -->
<div id="rightContent">
</div> <!-- end of right content -->
</div> <!-- end of middle container -->
<div id="footer">
<p class="footernav">Home | About | Products | Contact
</p>
<p class="copyright">Copyright © 2013 JBA Packaging Supplies | Designed by iDesign</p>
</div> <!-- end of footer div -->
CSS:
#rightContent{
width: 690px;
height: 400px;
float: right;
background-color:#222;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;}
#leftContent{
display: inline-block;
width: 240px;
height: 200px;
background-color:#555;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;}
#middlecontainer {
width: 960px;
background-color:#003;}
#footer {
width: 960px;
background-color: #121212;
text-align: center;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;}
#footer a{
text-decoration: none;
list-style-type: none;
color:#888;
}
#footer a:hover{
text-decoration: none;
list-style-type: none;
color:#444;
}
.footernav {
font-family:Arial, Helvetica, sans-serif;
font-size: .8em;
color:#444;
padding-top: 10px;}
.copyright {
font-family:Arial, Helvetica, sans-serif;
font-size: .8em;
color:#888;
padding-top: 10px;}

Answer 1

What you are missing is clearing the floating elements
Demo
Just add this <div style="clear: both;"></div> at the end of the container element, you can also clear the floats using overflow: hidden; for the parent div. Also for demo purpose I've added the styles inline, you can make a class out of it and use that instead of inline styles which is considered as bad practices..
Also if you want to clear the floating elements, you can use this to self clear the parent element.
.self_clear:after { /* Use this if you wish to ditch IE8 */
content: " ";
display: table;
clear: both;
}
<div class="self_clear"> <!-- Example usage -->
<div class="floated_left"></div>
<div class="floated_right"></div>
</div>
This answer of mine will provide in detail explanation, that why you need to use clear: both;

Answer 2

Try adding a clearing div
#clear{
clear:both;
}
Here is the fiddle http://jsfiddle.net/swDnn/1/
Hope it helps...

Answer 3

try this
http://jsfiddle.net/VU3xW/4/
#rightContent{
width: 690px;
height: 400px;
float: right;
background-color:#222;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;}
#leftContent{
display: inline-block;
width: 240px;
height: 200px;
background-color:#555;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;}
#middlecontainer {
width: 960px;
background-color:#003;}
#footer {
width: 960px;
background-color: #121212;
text-align: center;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;}
#footer a{
text-decoration: none;
list-style-type: none;
color:#888;
}
#footer a:hover{
text-decoration: none;
list-style-type: none;
color:#444;
}
.footernav {
font-family:Arial, Helvetica, sans-serif;
font-size: .8em;
color:#444;
padding-top: 10px;}
.copyright {
font-family:Arial, Helvetica, sans-serif;
font-size: .8em;
color:#888;
padding-top: 10px;}

Answer 4

Try giving your middlecontainer a overflow:auto property.

Answer 5

Your footer need clearing so add clear:both in #footer
#footer {
clear:both;
width: 960px;
background-color: #121212;
text-align: center;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;}