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>