title: Display divs inline next to each other with CSS + centered, IE8
body: <p><strong>UPDATE:</strong> Turns out that Bart's answer is the correct one.  4*64+8*1 = 264px wide div to contain the other divs and their 1px borders gives exactly the effect I wanted.  I modified my sample code to contain his answer.  Thanks Bart.</p>
  
  <p>I'm struggling, again, with CSS.  This sample shows 1,2,3,4 at the size I want them using a table.  When I try to do the same with CSS the div collapses to the size of the content rather than then height/width specified.  Target browser: IE8</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css" media="screen"&gt; 
  #one, #two, #three, #four, #five, #six, #seven, #eight 
  {
      height: 64px; width: 64px;
      border: 1px solid black;
      background-color: lightgreen;
  }
  #five, #six, #seven, #eight { float:left; }
  #cont {width:264px;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;center&gt;
  
  &lt;table&gt;&lt;tr&gt;
  &lt;td&gt;&lt;div id="one"&gt;1&lt;/div&gt;&lt;/td&gt;
  &lt;td&gt;&lt;div id="two"&gt;2&lt;/div&gt;&lt;/td&gt;
  &lt;td&gt;&lt;div id="three"&gt;3&lt;/div&gt;&lt;/td&gt;
  &lt;td&gt;&lt;div id="four"&gt;4&lt;/div&gt;&lt;/td&gt;
  &lt;/tr&gt;&lt;/table&gt;
  
  &lt;div id="cont"&gt;
  &lt;div id="five"&gt;5&lt;/div&gt;
  &lt;div id="six"&gt;6&lt;/div&gt;
  &lt;div id="seven"&gt;7&lt;/div&gt;
  &lt;div id="eight"&gt;8&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/center&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>