float within h2

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Jason Allen - 29 Oct 2003 04:55 GMT

I have a header which contains a subject and a date, and I would like it to
look something like this:

Some text that is the subject October 28, 2003

Where the subject text is aligned to the left and the date is aligned to the
right.

To accomplish this, I tried the following:

<h2>Some text that is the subject <span style="float: right">October
28, 2003</span></h2>

which does float the date to the right but unfortunately, the date is
underneath the header, like this:

Some text that is the subject

October 28, 2003

instead of both items sharing the same line.

Anyone have any idea how to fix this?

Thanks,

Jason A.

Reply to this Message

Brian - 29 Oct 2003 05:33 GMT

> I have a header which contains a subject and a date,
> and I would like it to look something like this:
>
> Some text that is the subject October 28, 2003

Is this in fact the header? Or is the subject the header, and the
date is something else? Always start with sensible markup.

> <h2>Some text that is the subject <span style="float: right">October
> 28, 2003</span></h2>
>
> which does float the date to the right but unfortunately,
> the date is underneath the header,

Yes, because a float makes the element block level.

> Anyone have any idea how to fix this?

<h2><span class="subject">Some text that is the subject</span>
<span class="date">October 28, 2003</span></h2>

h2 {text-align: right}
h2 span.subject {float: left }

This should work. But a better solution might be as follows:

<h2>Some text that is the subject</h2>
<div class="date">October 28, 2003</div>

div.date {text-align: right}
h2 {float: left }

For things to line up, you'll likely have to set font-size or margins.

h2, div.date {margin-top: 1em; font-size: 120%;} /* etc. */

Signature

Brian
follow the directions in my address to email me

Reply to this Message

Johannes Koch - 29 Oct 2003 10:09 GMT

> <h2><span class="subject">Some text that is the subject</span>
> <span class="date">October 28, 2003</span></h2>
>
> h2 {text-align: right}
> h2 span.subject {float: left }

<http://www.w3.org/TR/REC-CSS2/visuren.html#floats>:
A floated box must have an explicit width (assigned via the 'width'
property, or its intrinsic width in the case of replaced elements).

> div.date {text-align: right}
> h2 {float: left }

same here

Signature

Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

Reply to this Message

Jason Allen - 31 Oct 2003 18:21 GMT

Thanks, I'm using your second method and it works great.

Jason A.

> > I have a header which contains a subject and a date,
> > and I would like it to look something like this:
[quoted text clipped - 31 lines]
>
> h2, div.date {margin-top: 1em; font-size: 120%;} /* etc. */

Reply to this Message

Brian - 31 Oct 2003 18:46 GMT

>> a better solution might be as follows:
>>
[quoted text clipped - 7 lines]
>>
>> h2, div.date {margin-top: 1em; font-size: 120%;} /* etc. */

> Thanks, I'm using your second method and it works great.

Note what Johannes Kock pointed out: according to the spec, you must
set a width to float an element. If you don't set a width, even
Mozilla will float an element if its width is smaller than the
viewport, but there's no guarantees.

P.S. Best not to top-post/upside-down full quote.

Signature

Brian
follow the directions in my address to email me

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / October 2003

float within h2