CSS/DIV equivalent of ALIGN=BASELINE

I'm still trying to learn CSS and the use of DIV, and a few examples
will get me started.

My challenge at the moment is to place some text to the right of a
header (a sort of footnote) and to have the baselines of the text
aligned. I can do this with a table:

<TABLE><TR VALIGN=BASELINE><TD><H2>Header</H2><TD>Comment</TABLE>

But my feeble attempt with DIVs fails:

<DIV STYLE="float:left;vertical-align:baseline"><H2>Header 2</H2></DIV>
<DIV STYLE="float:left;vertical-align:bottom">text</DIV>

Am I missing something obvious, or is this harder than it looks?

--
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk

On 2008-07-16, Steve Swift <Steve.J.Swift (AT) gmail (DOT) com> wrote:

I'm still trying to learn CSS and the use of DIV, and a few examples
will get me started.

My challenge at the moment is to place some text to the right of a
header (a sort of footnote) and to have the baselines of the text
aligned. I can do this with a table:

TABLE><TR VALIGN=BASELINE><TD><H2>Header</H2><TD>Comment</TABLE

But my feeble attempt with DIVs fails:

DIV STYLE="float:left;vertical-align:baseline"><H2>Header 2</H2></DIV
DIV STYLE="float:left;vertical-align:bottom">text</DIV

Am I missing something obvious, or is this harder than it looks?

No, and it is harder than it looks

Vertical-align only applies to things that are display: inline or
table-cell, and it isn't inherited, so it does nothing on your divs.

Will this do:

h2 { display: inline }

...

<h2>Header 2</h2> text

In article
<doraymeRidThis-AC45CF.18101616072008 (AT) news-vip (DOT) optusnet.com.au>,
dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

span {position:relative; font-size: 50%;}

should be

span {font-size: 50%;}

I meant to delete position: relative;, it was from an earlier fiddling.

--
dorayme

Ben C wrote:

Will this do:

h2 { display: inline }
...
h2>Header 2</h2> text

I wouldn't want to change all H2 instances, but I can certainly use this
approach. Thanks for showing me something I hadn't come across before.

One of my colleagues at work suggested this:

<h2>Part 2 <span style="font-size:small;font-weight:normal">(Experts
Only)</span></h2>

Which is perfect for my occasional use.

--
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk

Steve Swift wrote:

h2>Part 2 <span style="font-size:small;font-weight:normal">(Experts
Only)</span></h2

<h2>Part 2 <small>(Experts Only)</small></h2>

Inline styles are a PITA so put the font settings in your CSS, i.e.

h2 small {font-weight:normal}

--
Berg