title: Two divs/uls side by side inside a div that is Absolutely positioned
body: <p>I have a container that drops down like a notification container, I want to have two bars side by side inside the absolutely positioned div.I don't want to have to define a width because each div inside will need to adjust widths (because of the presence of a scrollbar or not) </p>
  
  <p>The problem is odd, when .notification-wrapper has absolute or relative positioning the .left and .right divs won't align side by side, however when i remove absolute/relative from .notification wrapper they do...(i do need relative/absolute to be applied to notification.wrapper)</p>
  
  <p>Here's what I have:</p>
  
  <pre><code>&lt;span class="notification-wrapper"&gt;
  &lt;div class="notification-container"&gt;
  
  &lt;div class="left"&gt;LEFT&lt;/div&gt;
  &lt;div class="right"&gt;RIGHT&lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/span&gt;
  
  
  
  
  .notification-wrapper {
  height: 32px;
  width: 25px;
  margin-right: -12px;
  margin-left: -12px;
  padding: 0px;
  font-size: 0px;
  position: absolute;
  left: 50%;
  top: 15px;
  right: 50%;
   }
  .notification-wrapper .notification-container {
  font-size: 12px;
  background-color: #FFF;
  height: 100px;
  position: absolute;
  top: 25px;
  }
  .notification-container .left {
  vertical-align: text-top;
  display: inline-block;
  background-color: #63F;
  width: 50px;
  }
  .notification-container .right {
  vertical-align: text-top;
  display: inline-block;
  background-color: #FFC;
  width: 120px;
  }
  </code></pre>