title: Placing multiple Divs (side by side) within a parent Div
body: <p>My goal is to place four divs within a single "container" div.  Here's my code so far:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body&gt;
       &lt;div id="navBar"&gt;
           &lt;div id="subDiv1"&gt;
           &lt;/div&gt;
           &lt;div id="subDiv2"&gt;
           &lt;/div&gt;
           &lt;div id="subDiv3"&gt;
           &lt;/div&gt;
           &lt;div id="subDiv4"&gt;
           &lt;/div&gt;
       &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#navBar
  {
      width: 75%;
      height: 75px;
      margin-left: 25%;
      margin-right: auto;
      margin-top: 2%;
      border-width: 1px;
      border-style: solid;
      border-radius: 10px;
      border-color: #008040;
      overflow: hidden;
  }
  
  #subDiv1, #subDiv2, #subDiv3, #subDiv4
  {
      width: 25%;
      height: 75px;
      border-width: 1px;
      border-color: #000;
      border-style: solid;
  }
  #subDiv1
  {
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      float: left;
      margin-left: 0%;
  }
  #subDiv2
  {
      float: left;
      margin-left: 25%;
  }
  #subDiv3
  {
      float: left;
      margin-left: 50%;
  }
  #subDiv4
  {
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      float: left;
      margin-left: 75%;
  }
  </code></pre>
  
  <p>As far as I know this is the only part of my code that's relevant to my question so I left some other parts out.. Don't mind the width and margin of the navBar, because it's actually within another container as well.</p>
  
  <p>P.S I searched Google and StackOverFlow and I could not find an answer that was helpful. There were many questions about placing two divs within a single div, but none for aligning multiple divs within a single div.</p>
  
  <p>Thanks for any help in advance!</p>