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 {
        line-height:1.3em;
}

.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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>Demo</title>
	<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;
		}
	</style>
</head>
<body>

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

</body>

</html>

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

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