I made a page

HTML Code:

.window {
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
margin-bottom: 0.8em;

.hd {
color: #FFFFFF;
background: url(http://images.hi5.com/images/header/subnav_gradient2.gif);
padding:5px 0px 5px 2px;
border-left:5px solid #5c7099;
border-right:5px solid #5c7099;

<div class="window">

<div class="hd">
<div style="margin-left: 1em; float:left">Left Text</div>
<div style="margin-right: 1em; float:right">RIGHT TEXT</div>

<div class="bd">I will also show how to set up a secondary DNS server, but I will not use normal zone transfers to get the records from the primary to the secondary DNS server.</div>

You can see it at


I need the "Left Text" aligned left and "RIGHT TEXT" to right side.

Now it is showing, but the text is not visible properly, it seems the the "bd" div is overlapping to "hd" div.

Can any one tell how i made the Left Text and RIGHT TEXT show clearly ?

Also the text in "bd" div is center align, what is the reason for this ? I do not say text-align:center in the style.