can not get my divs to position correctly

this is what the div should look like using tables

but i can unable to get this using divs.


<table width="100%" border="0">
<tr>
<td colspan="2">this box should have a small bottom border</td>
</tr>
<tr>
<td>b</td>
<td>c</td>
</tr>
</table>



this is what code i currently have.

can anyone help me on this?


<div style="margin:0 auto; padding: 5px 0px 0px 5px;">
<div style="float: left; background: url(images/left_halfroundedcircle.gif); background-repeat: no-repeat; width: 10px; height: 29px;"></div>
<div style="float: left; background-color: #000000; color: #CCCCCC; font-size:12pt; font-weight:bold; width: 95%; line-height: 29px;">&nbsp;&nbsp;BLURB BLURB BLURB BLURB BLURB </div>
<div style="float: left; background: url(images/right_halfroundedcircle.gif); background-repeat: no-repeat; width: 15px; height: 29px;"></div>
<div class="clear"></div>
</div>


<div style="float: left; background-color: #000000; color: #CCCCCC; font-size:10pt; border-bottom: 1px solid #000;">BLURB BLURB BLURB BLURB BLURB </div>

<div style="margin:0 auto; padding: 5px 0px 0px 5px;">
<div style="float: left;>
<div style="float: center; font-weight:bold; color: #6699FF;">BLURB BLURB BLURB BLURB BLURB BLURB </div>
<div style="float: center; font-weight:bold; color: #004DEA;"><em>&quot;BLURB BLURB BLURB BLURB BLURB BLURB BLURB &quot;</em></div>

<div style="float: justify; color: #6699FF;">
<p>&nbsp;</p>
BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB
</div>

<div>
BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB
</div>

</div>

<div style="float: left;>

<div>
<em><strong>Events</strong></em>
<strong><a href="">Please check back to see its progress.<br><br></a></strong>
</div>

<p><strong>VIEW SOME OF OUR IMAGES</strong><br></p>

<p><a href=""><img src="images/sm.jpg" width="114" height="82" border="0"></a>&nbsp;&nbsp;</p>

</div>

Firstly - I'd suggest that you stop using inline CSS....setup an external CSS file - you'll find it much easier in the long run.

Secondly, I think you may be getting muddled up with float & text-align....a float can't be center or justify.

You should be able to achieve your table example by using only 3 divs...4 if you want to enclose them altogether.

To get the side by side divs, you can either use float, or fixed widths & set them to display: inline-block;

If you do use float, remember to clear the float after them because if you don't, you could cause other problems further down the page.

So the div setup can be simply:

<div id="wrapper">

<div class="border">
<p>This is the div to have the bottom border.</p>
</div>

<div class='left'>
<p>block to appear on the left</p>
</div>
<div class='right'>
<p>block to appear on the right</p>
</div>

</div>


The starting point for the CSS is:

* {
margin: 0px;
padding: 0px;
}

#wrapper {
width: 950px;
margin: 0px auto;
background: #FFF;
}

.block {
border: 1px solid #666;
padding: 0px 0px 20px 0px;
}

.left {
width: 50%;
display: inline-block;
}

.right {
width: 50%;
display: inline-block;
}


I haven't checked this, but it should work....if you want to use float, have a play & see if you can make it work.

The * is a global reset to zero all margins & padding