Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Left and right aligned text on same line

    Simple problem, easy solution?

    I want a horizontal (navigation) bar with some text aligned left and some right, centered vertically. The following table code does that easily:

    <table style="width: 100%; height: 10%; background: #CCC"><tr>
    <td style="text-align: left">left</td>
    <td style="text-align: right">right</td>
    </tr></table>


    How do I do that with CSS?

    I tried several approaches:
    • Floating div's, aligned left and right. Ugly breaks if I shrink the window. Problem getting both div's to have the same height with different size fonts. If I specify a height, the vertical middle alignment is gone.
    • div for left part, absolutely positioned span for right part. Problems with vertically middle alignment.
    • Two span's with "text-align: left" and right. Right alignment is ignored.


    The hard part is to get both the height of the bar and the middle vertical alignment right. As soon as I specify a height, the vertical alignment is gone:

    <div style="background: #CCC; height: 30px">
    hello charlie
    </div>


    adding a "vertical-alignment: middle" is ignored both in FF and IE. Any suggestions?

    Regards,
    Hans

  • #2
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    gosh, this is tough!!

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    maybe something like this?
    Code:
    <div style="background: #CCC; height: 30px">
    <div id="left" style="float:left;padding-top:6px;font-size:14px;">hello</div><div id="right" style="float:right;padding-top:6px;font-size:14px;">charlie</div>
    </div>

  • #4
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your suggestion!

    I should have been more specific: of course a pixel definition layout would work, but that is something I try to avoid, if possible. Fonts must remain scalable.

    Regards,
    Hans


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •