CSS/DIV equivalent of ALIGN=BASELINE

#1 July 16th, 2008, 07:25 AM

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

#2 July 16th, 2008, 08:05 AM

On 2008-07-16, Steve Swift <Steve.J.Swift@gmail.comwrote:

Quote:

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</h2text

#3 July 16th, 2008, 08:15 AM

In article <487eee89@news.greennet.net>,
Steve Swift <Steve.J.Swift@gmail.comwrote:

Quote:

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>
>

Well, that does not align the baselines.

Quote:

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?

Is this what you want:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css" media="screen">
h2 {font-size: 200%;}
span {position:relative; font-size: 50%;}
</style>
</head>
<body>
<h2>Header <span>Comment</span></h2>
</body>
</html>

--
dorayme

#4 July 16th, 2008, 08:25 AM

In article
<doraymeRidThis-AC45CF.18101616072008@news-vip.optusnet.com.au>,
dorayme <doraymeRidThis@optusnet.com.auwrote:

Quote:

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

#5 July 16th, 2008, 08:25 AM

In article
<doraymeRidThis-AC45CF.18101616072008@news-vip.optusnet.com.au>,
dorayme <doraymeRidThis@optusnet.com.auwrote:

Quote:

In article <487eee89@news.greennet.net>,
Steve Swift <Steve.J.Swift@gmail.comwrote:
>

Quote:

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:

Quote:

Is this what you want:
>

Sorry to come in again, but a further thought, to make the comment plain
text, not bold:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css" media="screen">
h2 {font-size: 200%;}
span {font-size: 50%;font-weight: normal;}
</style>
</head>
<body>
<h2>Header <span>Comment</span></h2>
</body>
</html>

--
dorayme

#6 July 17th, 2008, 05:55 AM

Ben C wrote:

Quote:

Will this do:
>
h2 { display: inline }
...
<h2>Header 2</h2text

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

#7 July 17th, 2008, 05:55 AM

dorayme wrote:

Quote:

Sorry to come in again, but a further thought, to make the comment plain
text, not bold:
>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css" media="screen">
h2 {font-size: 200%;}
span {font-size: 50%;font-weight: normal;}
</style>
</head>
<body>
<h2>Header <span>Comment</span></h2>
</body>
</html>

That's almost exactly what a colleague at work suggested (see my post
above). Thanks!

I've now splashed out on a book to help me with CSS, so maybe you won't
see me here again in the near future.

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

#8 July 17th, 2008, 06:45 AM

In article <48802a1e$1@news.greennet.net>,
Steve Swift <Steve.J.Swift@gmail.comwrote:

Quote:

dorayme wrote:

Quote:

Sorry to come in again, but a further thought, to make the comment plain
text, not bold:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

....

Quote:

>
That's almost exactly what a colleague at work suggested (see my post
above). Thanks!
>
I've now splashed out on a book to help me with CSS, so maybe you won't
see me here again in the near future.

That's what I call optimism! Good luck.

--
dorayme

#9 July 17th, 2008, 09:45 PM

Steve Swift wrote:

Quote:

>
<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

CSS/DIV equivalent of ALIGN=BASELINE

Popular Articles

What is Bytes?