HTML/CSS Float Right inside <p>

Question

I have this code:

<p><a href="#">Blah</a> | <span>stuff</span><span>1</span><span>dfh5heh</span> | June 17, 2010 <a href="#" style="float:right;">46884</a></p>

It's very trivial, but it doesn't render the same in IE8 and Firefox 3. I would assume that it renders incorrectly in IE8 as opposed to Firefox.

The above code lists some stuff in a P as follows:

------------------------------------------------------------
Blah | stuff1dfh5heh | June 17, 2010                   46884
------------------------------------------------------------

In IE8 the 46884 stuff slips down underneath the bottom border which leaves me two questions.

1. How do I fix this. I'm guessing I need to use a div instead of a p tag.
2. What mechanism in IE8 (Firefox?) produces this erroneaus rendering.

Edit: I double checked what mode I was in in IE and discovered that I was in compatibility mode for some reason. Upon switching to the correct mode "IE8 Standards" this error is eliminated. I'd still like to know how to fix the error for IE7 users?

Answer 1

Ensure your document is identifying itself as HTML 4.01 Strict in the DOCTYPE.

Answer 2

<div style="width:90%"><a href="#">Blah</a> | <span>stuff</span><span>1</span><span>dfh5heh</span> | June 17, 2010
 <a href="#" style="float:right;display:inline">46884</a></div>

Try this out.

M working on linux so cant test in IE.But If d above code does not work, giv text-align:right to anchor tag instead of float right.

Answer 3

Hello there ... try the following code:

HTML

<div style="width:100%; height:50px; border-top:1px dashed #000;border-bottom:1px dashed #000;">
<a class="anch" href="#">Blah</a>
<div class="sep"><!-- --></div>
<span class="info">Stuff</span>
<span class="info">1</span>
<span class="info">dfh5heh</span>
<div class="sep"><!-- --></div>
<span class="info">June 17, 2010</span>
<a class="right_anch" href="#">46884</a>
</div>

CSS

.anch{float:left; display:inline-block;}
.sep{float:left; display:inline; margin-left:10px; margin-right:10px; width:1px; height:12px; background-color:#000; margin-top:5px;}
.info{float:left;}
.right_anch{float:right; display:inline-block;}

make sure to set a height or a min-height to the div that contains the whole thing, i have it 50px in the example above ...