CSS text placement

[HostOnNet]

Hi,

I made a page

<style>

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


.hd {
color: #FFFFFF;
font-family:verdana;
font-size:12px;
font-weight:bold;
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;
}
</style>

<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>

<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>

</div>

You can see it at

http://www.webcash.in/fp/css1.html

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.

Thanks,

Yujin

[markbrown4]

Hi,

You're not clearing your floats!

And your text isn't aligned center - it's just the text is getting out of the way of the floats on either side.

.hd {
color: #FFFFFF;
font-family:verdana;
font-size:12px;
font-weight:bold;
background: url(http://images.hi5.com/images/header/subnav_gradient2.gif);
padding:5px 0px 5px 2px;
overflow: hidden; /* Clear children */
width: 100%; /* Clear children in IE */
}

Perhaps a safer method for clearing is to simply add a clearing div.

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

It's thoroughly covered in the CSS FAQ at the top of the forum

[HostOnNet]

Thanks markbrown4 for the reply. I got it working. Going to read the CSS FAQ now :-)

[holmescreek]

You could also create a .lefttext and .righttext class, its much easier to change these in a style sheet at a later time and upload a single style sheet than to have to change inline styles and have to upload a ton of pages.

You could also achieve the same thing using two span tags inside a single div. the first span with a class of "lefttext" the second with a class of "righttext".

[Tyssen]

Better still, make the container text-align: right and then you only have to put a span around the left bit and float it left.