title: Why do the float elements not align side by side when using widths?
body: <p>I have the following code below however am confused as to why the div element <code>rightnav</code> appears below the div element <code>leftnav</code> if I apply a width property to it.  What am I doing wrong or have I misunderstood the use of floats?</p>
  
  <p><strong>CODE</strong></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTMl 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" /&gt;
      &lt;meta http-equiv="content-language" content="en-us" /&gt;
      &lt;meta name="keywords" content="" /&gt;
      &lt;meta name="description" content="" /&gt;
      &lt;meta name="author" content="" /&gt;
      &lt;meta name="copyright" content="&amp;copy; 2012" /&gt;
  
      &lt;title&gt;DIV example&lt;/title&gt;
  
      &lt;base href="" /&gt;
  
      &lt;link rel="stylesheet" href="" /&gt;
  
      &lt;style type="text/css"&gt;
  
      * {
          margin: 0px;
          padding: 0px;
          font-family: Arial, Verdana, sans-serif;
          font-size: 100%;
      }
  
      #content {
          width: 700px;
          margin-top: 20px;
          margin-right: auto;
          margin-bottom: 0px;
          margin-left: auto;
      }
  
      #leftnav {
          float: left;
          width: 200px;
          border-width: 1px;
          border-color: #000000;
          border-style: solid;
      }
  
      #rightnav {
          border-width: 1px;
          border-color: #000000;
          border-style: solid;
      }
  
  
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="container"&gt;
          &lt;div id="content"&gt;
              &lt;div id="leftnav"&gt;left nav&lt;/div&gt;
              &lt;div id="rightnav"&gt;right nav&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Output</strong></p>
  
  <p><img src="https://i.stack.imgur.com/iqSYa.png" alt="enter image description here"></p>
  
  <p>Now if I amend the code as follows by applying the property <code>width</code> to the declaration <code>rightnav</code>, the element appears below <code>leftnav</code>. I thought that it may have to do with the width of the div element <code>content</code> however there is sufficient width with the combination of both div elements i.e. 200px + 200px &lt; 700px</p>
  
  <p><strong>CODE</strong></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTMl 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" /&gt;
      &lt;meta http-equiv="content-language" content="en-us" /&gt;
      &lt;meta name="keywords" content="" /&gt;
      &lt;meta name="description" content="" /&gt;
      &lt;meta name="author" content="" /&gt;
      &lt;meta name="copyright" content="&amp;copy; 2012" /&gt;
  
      &lt;title&gt;DIV example&lt;/title&gt;
  
      &lt;base href="" /&gt;
  
      &lt;link rel="stylesheet" href="" /&gt;
  
      &lt;style type="text/css"&gt;
  
      * {
          margin: 0px;
          padding: 0px;
          font-family: Arial, Verdana, sans-serif;
          font-size: 100%;
      }
  
      #content {
          width: 700px;
          margin-top: 20px;
          margin-right: auto;
          margin-bottom: 0px;
          margin-left: auto;
      }
  
      #leftnav {
          float: left;
          width: 200px;
          border-width: 1px;
          border-color: #000000;
          border-style: solid;
      }
  
      #rightnav {
          width: 200px;
          border-width: 1px;
          border-color: #000000;
          border-style: solid;
      }
  
  
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="container"&gt;
          &lt;div id="content"&gt;
              &lt;div id="leftnav"&gt;left nav&lt;/div&gt;
              &lt;div id="rightnav"&gt;right nav&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>OUTPUT</strong></p>
  
  <p><img src="https://i.stack.imgur.com/U82e9.png" alt="enter image description here"></p>