title: Displaying two sections that are different sizes side by side html
body: <p>Here is the html coding:</p>
  
  <pre><code>&lt;div&gt;        
      &lt;section class="aboutus"&gt;
          &lt;div&gt;Some content 1&lt;/div&gt;
          &lt;div&gt;Some more 1&lt;/div&gt;
      &lt;/section&gt;
  
      &lt;section class="tripinfo"&gt;
          &lt;div&gt;Some content 2&lt;/div&gt;
          &lt;div&gt;Some more 2&lt;/div&gt;
      &lt;/section&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>I want to display to html sections side by side.
  When I do this it works:</p>
  
  <pre><code>div {float: left;}
  div section {width: 50%; float: left;}
  </code></pre>
  
  <p>but when i  try to specify each one as a separate size like this it doesnt:</p>
  
  <pre><code>div {
      float: left;
  }
  section .aboutus{
      float: left;
      width: 80%;
  }
  section .tripinfo{
      float: left;
      width: 20%
  }
  </code></pre>
  
  <p>As you can see.  In the first example i make both section 50 percent in the same code block.  However as soon as i specify the size of each on in different classes it screws up.
  So if any of you could help me out that would be great.</p>