Ascending text in IE7, FF3!

I have, what appears to be, a very simple code example but I am getting very strange results. Here is a very basic example of what I am dealing with:

p {

.result {
	border-bottom: 1px dotted gray;
	margin-bottom: 15px;
	padding: 5px;
	width: 100%;
	overflow: hidden;

.sort {
	float: right;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
	<link type="text/css" rel="stylesheet" href="../reset.css" />
	<link type="text/css" rel="stylesheet" href="../css_index.css" />
	<link type="text/css" rel="stylesheet" href="css_search.css" />
	<style type="text/css">
		body {
			padding: 20px;

<p class="result">
	<span class="sort">Right</span>



As you can see, a reset has been applied so all margins/borders were set to 0, etc. It’s Eric Meyers’ reset if that matters. Anyway, The result I get is that the “Left” text magically ascends one line up above the right text. It’s very, very weird. I checked Firebug to make sure no other styles were having an effect on the elements so all the info should be right here. I have a feeling it has something to do with the line-height rule…

What am I missing? :frowning:

The problem is that your first element in the div doesn’t have layout, so it’s treated as the content of your block-level element (the paragraph) and uses up 100% of the width. (I hope I got this explanation right).

If you float it left, it will behave (even in IE6) - the two inline spans can now “share” the same line:

<p class=“result”>
<span style=“float:left”><strong>Left</strong></span>
<span class=“sort”>Right</span>

Melissa, you are a life saver! Thanks a bunch!