右浮动范围似乎不在父div中

Question

I'm trying to float a span right in my message bar. For some reason on in my webpage the right floated span appears below the div visually. In JS fiddle it looks ok. What could be pushing it down?

Example: http://jsfiddle.net/g6wWB/

Html:

<div class="msg">
    Some thext here
    <span class="goright">Close</span>
</div>

Css:

.msg {
    background-color: green;
}

.goright {
    float:right;
}

Answer 1

I believe this is an issue only in IE7 and below where the content itself is pushing the floated element down. In modern browsers it should not be pushed down. But to fix the issue, putting the floated span before the content should work.

<div class="msg">
    <span class="goright">Close</span>
    Some thext here
</div>

Answer 2

Another possible solution, if you want full control over the placement of the span is to use absolute positioning.

.msg {
    background-color: green;
    position: relative;
}

.goright {
    position: absolute;
    right: 0;
    top: 0;
}​

This way, it won't be pushed down, no matter how much content, or the order of the elements inside the div.