#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    147
    Rep Power
    12
    The forums went down right after I posted this. Here's the original message:

    I'm trying to get a bit of text in a <span> to sit at the bottom of a <div>. I've tried setting the vertical-align to 'bottom' and 'text-bottom' but it won't budge.

    View source of this page for example

    I'm trying to get the part that says 'this should be aligned to the bottom' to shift down so it's flush with the top of the menu.

    Any ides? I'm trying to create a page without tables, using only CSS positioning.
  2. #2
  3. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1100
    Specify the height of the <div> that contains that text, then place that text in another <div> and give it a top margin enough to send it to the bottom of the container <div>. You may also be able to give the <span> that margin (or padding) instead, not sure there.
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    in Orbit mostly
    Posts
    148
    Rep Power
    12
    I don't think you want to play with fixed margin heights, as that would be tying you into the rendering engine and fixed heights again.
    I think the underlying problem is the fact that from what I've read and tried, the "vertical-align" is tied to the line-height, which by default follows the text-size.
    I was able to do what you want by inserting
    Code:
    div.header
    {
      line-height:33px;
      margin: 5px;
      vertical-align: text-bottom;
    }
    it seems that the 33 is the minimum (28 largest character + 5 top margin).

    And it will never be FLUSH with the top of the menus if you have the 5 px margin, of course, but you will have a constant border which is the same under "this should be aligned to the bottom" as it is under "SUBTITLE".
    Last edited by OldJacques; July 12th, 2003 at 01:48 AM.
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    147
    Rep Power
    12
    Thanks for the help. I couldn't get the line-height method working, but I got what I wanted by changing the <span>s to <div>s and just pushing it to the bottom by setting margin-top.

    Now I have a new CSS positioning problem. Ironically, now that I want an element to go to the middle, it won't do it.

    click here for example

    I'm trying to get that center section to span the distance between the two side menus (with a bit of padding between them). Any ideas? I can get it to look 'ok' for a single resolution by setting width: xx% but it's only exactly centered for that resolution. This is driving me nuts! I may have to go back to tables.
  8. #5
  9. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Back to your first problem, what you want is something like this;
    Code:
    span.left 
           {float: left;
    	font-size: 15px;
    	vertical-align: text-bottom;
            position: relative;
            top: 25px;}
    For your second problem, try this site. If it's not the answer, it'll point you in the right direction.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo