When I float the div to the right the screen messes up...I've tried clear and some other options... : I'm having an issue in general when it comes to floats. I'll be doing fine with the layout but once I start floating the whole page does weird stuff. I think I need a better understanding of the concept of what goes on. Here is my code for html and css.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <!DOCTYPE html>
    <html>
    <head>
    	<title>This is it</title>
    	<link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    	<div id="wrapper">
    	<div id="heading">Heading</div>
    	<div id="navigation">Navigation</div>
    	<div id="leftSide">Left Side</div>
    	<div id="rightSide">Right Side</div>
    	<div id="footer">Footer</div>
    	<div style="clear: right;"></div>
    	</div>
    </body>
    </html>

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    * {
    	margin: 0;
    }
    #heading {
    	background-color: black;
    	height: 150px;
    }
    #navigation {
    	background-color: green;
    	height: 30px;
    }
    #leftSide {
    	background-color: blue;
    	width: 400px;
    	height: 700px;
    }
    #rightSide {
    	background-color: red;
    	width: 400px;
    	height: 700px;
    	float: right;
    }
    #footer {
    	background-color: black;
    }

<!-- end snippet -->

