word-wrap in CSS

I am trying to implement the following display.

My html & css are like this...

<div class="label iepngfix">Nickname</div>开发者_如何学运维
<div class="text">
   <?php echo $nickname; ?>
</div>

.label {
    float: left;
    font-weight: bold;
    padding: 0;
}

.text {
    float: left;
    margin: 0 0 0 5px;
    word-wrap: break-word;
}

In IE6, 7 it appears fine but, in IE8, Chrome and Firefox, it appears like this...

What am I missing over here?

Regards

Your CSS and HTML don't really match, but my guess is that since you don't give a width to the second float and it contains a long text, the browser makes it as wide as possible thus it won't fit beside the first float.

Or something you are not showing us is triggering this. Is your page triggering standards mode (e.g. does it have a DOCTYPE)?

If you give div.text a set width you will get the results that you're looking for.

Example: If the containing box is 250px, div.label is naturally 90px, then div.text needs a set width of 155px or less (that's taking it's 5px margin into account).