Question

I have a block of text whith with a span at the end that is floated right. Like this:

<p>Some text describing an event that may wrap to several lines. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.<span>January 1, 2012</span>

With css like this:

span { float:right; }

Here it is on jsfiddle: http://jsfiddle.net/eusonic/aL6J5/8/

On all modern browsers the span displays on the same line as the last line of the paragraph, which is what I want (It will be forced down to the next line if the last line of the paragraph is too long, which is perfect). In IE7 the span displays below the paragraph no matter what. I have tried adding display:block to the span and float:left to the paragraph. No luck.

Answer 1

You won’t be able to do this in IE 7- with pure css.

The option of placing both elements in a conatiner, then floating the <p> element left and the <span> right is viable, but keep in mind that it won’t achieve the same look that you want.

Is the idea behind this to have the date after a paragraph(s) with unknown height(s)? What are you trying to achieve?

Might I suggest doing something like this?