title: CSS horizontal alignment for divs inside div container?
body: <p>Having trouble with WP 3.0.4 not displaying my css styling for horizontal alignment of 4 boxes (divs) inside a container div. NOTE: The same css styling works fine with HTML 4.01 Transitional//EN on my hand-coded html/php website. But WP 3.0.4 displays the four boxes stepped down from each other, like a staircase.</p>
  
  <p>I'm using FireFox 3.6.13, btw.</p>
  
  <p>CSS: </p>
  
  <pre><code> div .box-container { display: inline;
   margin: 0.63em 0pt; padding: 10px;
   width: 640px; background-color:
   rgb(229, 231, 225); position:
   relative; float: left; overflow:
   hidden; }
  
   div .small-box { border: 1px solid
   rgb(153, 51, 102); margin: 10px 5px;
   padding: 0.325em; float: left;
   background-color: rgb(255, 244, 227);
   width: 128px; line-height: 0.85em;
   max-height: 8em; min-height: 8em;
   position: relative; }
  </code></pre>
  
  <p>HTML goes like this:</p>
  
  <pre><code> &lt;div class="box-container"&gt;
   &lt;div class="small-box"&gt;SOME TEXT
   &amp; IMAGE&lt;/div&gt; &lt;div
   class="small-box"&gt;SOME TEXT &amp;
   IMAGE&lt;/div&gt; &lt;div
   class="small-box"&gt;SOME TEXT &amp;
   IMAGE&lt;/div&gt; &lt;div
   class="small-box"&gt;SOME TEXT &amp;
   IMAGE&lt;/div&gt;
  
   &lt;/div&gt;
  </code></pre>
  
  <p>The box-container div width is specified at 640px, but I notice the padding extends it beyond this. In any case, it is plenty large to accommodate the four small boxes, which total 512px plus their total 40px margin, plus the 20px padding on the box-container div.</p>
  
  <p>I don't understand why the padding pushes the size of the box-container div. But when I tried to use max-width: 640px, I observed that the boxes all lined up vertically, and the box-container div was no wider than 170px.</p>
  
  <p>The small-box divs are actually all the same size, their contents consist of text &amp; image.</p>
  
  <p>Help? </p>