title: How can I move this box in this HTML/CSS file?
body: <p>Given this HTML document</p>
  
  <pre><code>&lt;html&gt; 
  &lt;head&gt; 
   &lt;title&gt;CSS Layout&lt;/title&gt; 
   &lt;link href="layout.css" rel="stylesheet" type="text/css" /&gt; 
  &lt;/head&gt; 
  &lt;body&gt; 
    &lt;div id="header"&gt;Header 900x100 px&lt;/div&gt; 
    &lt;div id="righttop"&gt;RightTop &lt;br /&gt;150x200 px&lt;/div&gt; 
    &lt;div id="lefttop"&gt;LeftTop 150x75 px&lt;/div&gt; 
    &lt;div id="content"&gt;Content 600x400 px&lt;/div&gt; 
    &lt;div id="rightbottom"&gt;RightBottom 150x200 px&lt;/div&gt; 
    &lt;div id="footer"&gt;Footer 900x100 px&lt;/div&gt; 
  &lt;/body&gt; 
  </code></pre>
  
  <p>and this CSS style sheet</p>
  
  <pre><code>body, div { 
     padding: 0; 
     margin: 0; 
     border: solid 1px; 
     width: 900px; 
  } 
  #header, #footer { 
     width: 898px; 
     clear: both; 
     height: 100px; 
  } 
  #righttop, #rightbottom{ 
     float: right; 
     width: 150px; 
     height: 200px; 
  } 
  #rightbottom { 
     clear: right; 
  } 
  #content { 
     float: left; 
     width: 591px; 
     height: 403px; 
  } 
  #lefttop { 
     width: 150px; 
     height: 100px; 
     float: left; 
  }    
  </code></pre>
  
  <p>How would I go about moving the "RightBottom" box to be directly underneath the "LeftTop" box without messing up the general layout? </p>