title: How do i sit 2 divs left and right of eachother
body: <p>So what i am trying to accomplish is sitting <code>&lt;div id="box"&gt;</code> left of and <code>&lt;div id="box2"&gt;</code> right of
  inside the container of <code>&lt;div id="content"&gt;</code> I must mention they cannot be position:absolute; unless there's a way to make sure the <code>height:auto;</code> div doesn't lose it's height because my experience <code>position:absolute;</code> seems to be floating above the other content. </p>
  
  <p>here's a direct link to show you whats happening. keep in mind this is a pure css layout with a php backbone</p>
  
  <p><a href="http://designed.sytes.net/index.php?p=about" rel="nofollow noreferrer">Direct Link to Issue</a></p>
  
  <pre><code>&lt;div id="content"&gt;
      &lt;div id="box1"&gt;
  &lt;h2&gt;Company Information&lt;/h2&gt;
              &lt;img src="images/photo-about.jpg" alt="" width="177" height="117" class="aboutus-img" /&gt;
              &lt;p color="FF6600"&gt;
              some content here
              &lt;/p&gt;
      &lt;/div&gt;
  &lt;div id="clear"&gt;&lt;/div&gt;
      &lt;div id="box" style="width:350px;"&gt;
              &lt;h2&gt;Availability&lt;/h2&gt;
              &lt;p&gt;
              some more content here
              &lt;/p&gt;
      &lt;/div&gt;
  &lt;div id="clear"&gt;&lt;/div&gt;
          &lt;div id="box2" style="width:350px;float:left;overflow: auto;"&gt;
              &lt;h2&gt;Our Commitment&lt;/h2&gt;
              &lt;p&gt; 
                some content here
              &lt;/p&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>