блоки не встают на одном уровне

[voldemen]

два блока должны быть на одном уровне и разного цвета, а получается один цвет и одинаковая ширина
в чем ошибка?

<left>
<style>

#radius1 { width:50px; }

#radius b { background-color: #7223dc; display: block; height: 1px; overflow: hidden; font-size:1px; }

#text { padding:5px; background-color: #7223dc; }

.r1 { margin: 0 10px; }
.r2 { margin: 0 7px; }
.r3 { margin: 0 5px; }
.r4 { margin: 0 4px; }
.r5 { margin: 0 3px; }
.r6 { margin: 0 2px; }
.r7 { margin: 0 1px; }

</style>



<div id="radius">

<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
<b class="r5"></b>
<b class="r6"></b>
<b class="r6"></b>
<b class="r7"></b>
<b class="r7"></b>
<b class="r7"></b>

<div id="text">
текст


</div>

<b class="r7"></b>
<b class="r7"></b>
<b class="r7"></b>
<b class="r6"></b>
<b class="r6"></b>
<b class="r5"></b>
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>

</div>
</left><br>





<center>
<style>

#radius { width:700px; }

#radius b { background-color: #ff0000; display: block; height: 1px; overflow: hidden; font-size:1px; }

#text { padding:5px; background-color: #ff0000; }

.r1 { margin: 0 10px; }
.r2 { margin: 0 7px; }
.r3 { margin: 0 5px; }
.r4 { margin: 0 4px; }
.r5 { margin: 0 3px; }
.r6 { margin: 0 2px; }
.r7 { margin: 0 1px; }

</style>



<div id="radius">

<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
<b class="r5"></b>
<b class="r6"></b>
<b class="r6"></b>
<b class="r7"></b>
<b class="r7"></b>
<b class="r7"></b>

<div id="text">
текст<br>текст<br>текст<br>текст<br >текст<br>текст<br>текст<br>текст<b r>текст<br>текст<br>
текст<br>текст<br>текст<br>текст<br >текст<br>текст<br>текст<br>текст<b r>текст<br>текст<br>



</div>

<b class="r7"></b>
<b class="r7"></b>
<b class="r7"></b>
<b class="r6"></b>
<b class="r6"></b>
<b class="r5"></b>
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>

</div>
</center>