By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,785 Members | 1,079 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,785 IT Pros & Developers. It's quick & easy.

float within h2

P: n/a
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.
Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Jason Allen wrote:
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. */

--
Brian
follow the directions in my address to email me

Jul 20 '05 #2

P: n/a
Brian wrote:
<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
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

Jul 20 '05 #3

P: n/a
Thanks, I'm using your second method and it works great.

Jason A.

"Brian" <us*****@julietremblay.com.invalid-remove-this-part> wrote in
message news:TqHnb.52989$Fm2.31619@attbi_s04...
Jason Allen wrote:
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. */

--
Brian
follow the directions in my address to email me

Jul 20 '05 #4

P: n/a
> Brian wrote
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. */

Jason Allen wrote: 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.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.