On Fri, Feb 5, 2010 at 6:09 PM, Mike Schleif <m...@helices.org> wrote:
> OK, I have two (2) elements sitting on an <hr />, one left justified and
> the other right justified:
>
> Abe Lincoln Biographical Info
> -----------------------------------------------------------------
>
> NOTE: The left text is larger (e.g., <h2>) than right text; but, BOTH
> must share same baseline.
HTML:
<div id="head">
<h1 id="top">Abe Lincoln</h1>
<span>Biographical Info</span>
</div>
<hr />
CSS:
h1 {margin: 0; font-size: 2em;}
hr {margin: 0;}
#head {
position: relative;
height: 2.5em;
}
#head h1, #head span {position: absolute; bottom: 0; line-height: 1;}
#head h1 {left: 0;}
#head span {right: 0;}
I would probably use a border-bottom on the #head element instead of a <hr />.
Note that you will need something like height to keep the containing
box open since the positioned elements are removed from the normal
flow.
A couple of keys to getting your baseline are the line-height and
margin on <hr />.
~ Tim W.
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
