Question : floating divs

Hi

I have just come across a situation which I was unable to complete with css....

I had 5 divs of equal width and height (208px wide) I needed them to be spread horizontally at equal spaces...the conatiner div was 1100px wide. easy, I thought... float each div left with right margin to create the equal spacing....

But they would not quite reach the right edge, and trying to adjust the margin would make them too wide and the furthest right would drop down and float below.....

I resorted to using a table, and by putting each div into a td and making the table with 100% it achieved the perfect result.... I can't believe I had to use a table to do this....

Am I missing something!

Any help would be appreciated!.

Cheers

Answer : floating divs

Here's a simple version that works. I had to account for the border width if you wonder why the math doesn't seem to add up.

                       
         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:

           
           
             <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Equal DIV Test</title>
<style type="text/css">
<!-- 
body { margin: 0; }
#wrappr {
	position: relative;
	width: 1000px;
	margin-left:auto;
	margin-right:auto;
	border: thin solid #ff0000;
	}
#subwrappr {
	position: relative;
	width: 960px;
	margin-left:auto;
	margin-right:auto;
	padding:0;
	border: thin solid #000000;
	}
.subdiv {
	width: 190px;
	float: left;
	border: thin solid #0000ff;
	}	
-->
</style>
</head>
<body>
<div id="wrappr">
<h1>Equal DIV Test</h1>
<div id="subwrappr">
<div class="subdiv">number 1</div>
<div class="subdiv">number 2</div>
<div class="subdiv">number 3</div>
<div class="subdiv">number 4</div>
<div class="subdiv">number 5</div>
<br clear="all" />

</div>
</div>
</body>
</html>

           
         