title: inline divs are not staying inline when content is placed inside them Chrome & Safari
body: <p>I have 3 inline divs, with set width and height. They look great, then I add content inside one of the divs and all the sudden they don't line up any more in Chrome and Safari.  (They also never line up in IE6 &amp; 7 I would love to understand that as well.)</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
      &lt;head&gt;
          &lt;title&gt;What is going on?&lt;/title&gt;
          &lt;style type="text/css"&gt;
              .actionBox
              {
                  width: 295px;
                  height: 215px;  
                  margin: 0 5px 5px 0;
                  display: inline-block;
                  background-color: #BBB;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
              &lt;div class='actionBox'&gt;
                  *** TAKE THIS LIKE OF TEXT OUT AND THEY WILL ALL LINE UP AGAIN ***
              &lt;/div&gt;
              &lt;div class='actionBox'&gt;
              &lt;/div&gt;
              &lt;div class='actionBox'&gt;
              &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>