#1
  1. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2002
    Location
    Queensland, Australia
    Posts
    827
    Rep Power
    141

    CSS Vertical Alignment


    I have this code on a page...

    <div id="nav-level1">
    <img src="images/image.gif" width="84" height="24" border="0" />
    <span class="level1"> <a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Research</a>
    | <a href="#">Industry</a> | <a href="#">Media</a> | <a href="#">Education</a>
    | <a href="#">Enquiries</a></span>
    </div>

    Through CSS, the div has been given a height of 24. The span has had it's font size set to xx-small. Both the IMG and SPAN object are set to float left.

    My problem is that I want the contents of SPAN to sit along the bottom edge of the DIV instead of along the top. I've tried vertical-align baseline for the DIV and SPAN but it had no effect.

    Any ideas what the correct way to do this is?
    Ooh, they have the Internet on computers now!
  2. #2
  3. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    vertical-align is for text alignment within one line, not within a block-level element. Here's a popular workaround, until W3C get this one standardized:

    http://www.wpdfd.com/editorial/wpd0103.htm#toptip
  4. #3
  5. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2002
    Location
    Queensland, Australia
    Posts
    827
    Rep Power
    141
    Thanks for the link Adios. It gave me some new ideas but none successfully produced what I needed.

    I've decided that's it's possible to DIV the page up differently to produce the effect I want rather than trying to vertically align an element.

IMN logo majestic logo threadwatch logo seochat tools logo