HighDots Forums  

CSS/DIV equivalent of ALIGN=BASELINE

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss CSS/DIV equivalent of ALIGN=BASELINE in the Cascading Style Sheets forum.

Reply
 
Thread Tools Display Modes
  #1  
Old   
Steve Swift
 
Posts: n/a

Default CSS/DIV equivalent of ALIGN=BASELINE - 07-16-2008 , 03:24 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



Reply With Quote
  #2  
Old   
Ben C
 
Posts: n/a

Default Re: CSS/DIV equivalent of ALIGN=BASELINE - 07-16-2008 , 03:56 AM






On 2008-07-16, Steve Swift <Steve.J.Swift (AT) gmail (DOT) com> wrote:
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</h2> text


Reply With Quote
  #3  
Old   
dorayme
 
Posts: n/a

Default Re: CSS/DIV equivalent of ALIGN=BASELINE - 07-16-2008 , 04:15 AM



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

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


Reply With Quote
  #4  
Old   
Steve Swift
 
Posts: n/a

Default Re: CSS/DIV equivalent of ALIGN=BASELINE - 07-17-2008 , 01:48 AM



Ben C wrote:
Quote:
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


Reply With Quote
  #5  
Old   
Bergamot
 
Posts: n/a

Default Re: CSS/DIV equivalent of ALIGN=BASELINE - 07-17-2008 , 05:38 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


Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.