title: How do I align two divs horizontally without the left one floating left?
body: <p>I have 2 div elements I want centered in my page. The outter div is 100% width and text-align: center. Like so:</p>
  
  <pre><code>    div.centerpanel {
      font-size: 28px;
      width:100%;
      height:100%;
      text-align: center;
  }
  </code></pre>
  
  <p>The two elements contained within it should appear next to each other but centered (they're both simply divs with text content). Simply put, I want a centered title on my page, each of the two words of the title being a seperate div. I read that you do the following to accomplish this:</p>
  
  <pre><code>float: left;
  clear: none;
  </code></pre>
  
  <p>As far as I can tell, the 'clear' does not have any visible effect. When I add the float: left, to the first of the two elements, it simply causes that element to slide all the way to the extreme left of the outer .centerpanel while the element that follows it remains out in the middle where it should be. So it's definitely aligning it properly but inexplicably sends it all the way to the left. </p>
  
  <p>How do I make it stay vertically aligned with it's following element but keep obeying the outer div's text-align: center?</p>