title: CSS divs side-by-side
body: <p>I realize that already there is a lot of material on here pertaining to this issue, but I still am having trouble placing three divs side-by-side rather than stacked on top of each other.</p>
  
  <p><a href="http://jsfiddle.net/wkQv6/" rel="nofollow">http://jsfiddle.net/wkQv6/</a></p>
  
  <pre><code>&lt;body&gt;
      &lt;div id='boom'&gt;
  
      &lt;div id='menutab' class='navbar'&gt;
      Menu
          &lt;/div&gt;
      &lt;div class='navbar' id='storytab'&gt;
      Our Story
      &lt;/div&gt;
      &lt;div class='navbar' id='contacttab'&gt;
          Contact
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  
  #boom{background-image:url(http://therealchicagoonline.com/wp-content/uploads/2011/03/Buca-di-Beppo-table_setting2.jpg);
  text-align:center;
  height:1000px;
  width:100%;
  background-repeat:no-repeat;
  margin-top:0px;}
  
  div.navbar{width:100px;
      float:left;
  
      display:inline-block;
  background-color:black;
  opacity:.7;
      position:fixed;
      z-index:1;
      height:25px;
      border-radius:0px;
      border-right:white;
      color:white;
      font-weight:bold;
      text-align:center;
      line-height:25px;
      vertical-align:bottom;
  }
  </code></pre>