UPDATE: I have discovered that implementing Bart's solution is the correct one. With a 264px wide div containing the other divs and their 1px borders, I achieved the desired effect. I have updated my code to include his answer. Thank you, Bart.
Once again, I am facing challenges with CSS. In this example, I have successfully displayed 1, 2, 3, and 4 at the desired size using a table. However, when attempting to replicate this using CSS, the div collapses to match the content size rather than the specified height/width. My target browser is IE8.
<!doctype html>
<html>
<head>
<style type="text/css" media="screen">
#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;}
</style>
</head>
<body>
<center>
<table><tr>
<td><div id="one">1</div></td>
<td><div id="two">2</div></td>
<td><div id="three">3</div></td>
<td><div id="four">4</div></td>
</tr></table>
<div id="cont">
<div id="five">5</div>
<div id="six">6</div>
<div id="seven">7</div>
<div id="eight">8</div>
</div>
</center>
</body>
</html>