title: When I float the div to the right the screen messes up...I've tried clear and some other options
body: <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
   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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
   &lt;div id="wrapper"&gt;
   &lt;div id="heading"&gt;Heading&lt;/div&gt;
   &lt;div id="navigation"&gt;Navigation&lt;/div&gt;
   &lt;div id="leftSide"&gt;Left Side&lt;/div&gt;
   &lt;div id="rightSide"&gt;Right Side&lt;/div&gt;
   &lt;div id="footer"&gt;Footer&lt;/div&gt;
   &lt;div style="clear: right;"&gt;&lt;/div&gt;
   &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>