Title followed by a horizontal rule on the same line

[Griff]

What I'm trying to achieve is to have a title followed by a horizontal
rule on the same line. For example:


Living on Mars ----------------
Living on Mars would be at best
impractical for the following
reasons: blah blah blah


Living on Earth ---------------
Life has evolved on earth for
the following reasons: blah blah
blah


I'm guessing the mark up I should be using would be as follows (please
advise if rubbish)


<div class="section">
<div class="title">Living on Mars<hr/></div>
<div class="body">Live has evolved on Mars....</div>
</div>


(for example I'm not sure whether I should be using <span/> instead of
<div/> here).


And...I'm clueless about how to write the CSS to control the <hr/>
within the <div class="title"/>. Also, is it possible to have the
<hr/> inserted by the style-sheet (i.e. not included in the mark up at
all)?


This would have to work with IE6 as well as Firefox...


All help would be much appreciated!


Thanks


Griff


PS: Also posted to "comp.infosystems.www.authoring.stylesheets"

 

[Adrienne]

What I'm trying to achieve is to have a title followed by a horizontal
rule on the same line. For example:


Living on Mars ----------------
Living on Mars would be at best
impractical for the following
reasons: blah blah blah

<h2>Living on Mars</h2>
<p>Living on Mars would be at best
impracticle for the following reasons:</p>
<ul>
<li>blah</li>
<li>blah</li>
<li>blah</li>

Living on Earth ---------------
Life has evolved on earth for
the following reasons: blah blah
blah

<h2>Living on Earth</h2>
<p>Life has evolved on earth for the following reasons:</p>
<ul>
<li>blah</li>
<li>blah</li>

I'm guessing the mark up I should be using would be as follows (please
advise if rubbish)


<div class="section">
<div class="title">Living on Mars<hr/></div>
<div class="body">Live has evolved on Mars....</div>
</div>


(for example I'm not sure whether I should be using <span/> instead of
<div/> here).

You _could_ use div, but the above makes more sense semantically.

And...I'm clueless about how to write the CSS to control the <hr/>
within the <div class="title"/>.

I played with it, and trust me, it a) looks odd, b) is very hard to get
working right. My suggestion is to style the H2 element nicely.

Also, is it possible to have the
<hr/> inserted by the style-sheet (i.e. not included in the mark up at
all)?

No. You cannot insert elements into stylesheets and have them render. You
can only style elements that are in the actual document.

This would have to work with IE6 as well as Firefox...

and Opera, and Safari, and ....