treehouse : what would you like to learn today?
Web Design Web Development iOS Development

vertically align to the bottom of a div?

  • Hi -
    I just read the article about absolute and relative positioning (http://css-tricks.com/absolute-position ... ositioning) and am trying to implement an example without success...

    Here is my example: http://seedtracker.40digits.com/

    In my example I'm trying to get the top navigation tabs to sit at the bottom of the tan block, but by default it sits on top. The closest I have got was using the example in the article, however, it was no longer centered and floated left.

    Ideas? Perhaps there is an easier way to lay it out than what I am trying to do. I'm fairly new to CSS design.

    -chrisL
  • Try setting position: absolute on the ul.basictab and setting the bottom value as needed. It looks like it's a static width design, so you can "center" it by setting a left value as well.
  • Thanks for the quick reply. That worked! I got it centered by setting the inner div width to 100%.

    However, the bottom alignment is right where I want it in IE7, it is about 10px short of the bottom when I look at it in FF?
  • you can try setting it for firefox and then through conditional comments feed the working css rules to ie7 only
  • "pab" said:
    you can try setting it for firefox and then through conditional comments feed the working css rules to ie7 only


    It would be better to fix the general style sheet for firefox and then have a conditional style sheet for IE. If it looks wrong in FF it's probably skewed in most other browsers too.
  • "Adam" said:
    [quote="pab"]you can try setting it for firefox and then through conditional comments feed the working css rules to ie7 only


    It would be better to fix the general style sheet for firefox and then have a conditional style sheet for IE. If it looks wrong in FF it's probably skewed in most other browsers too.[/quote]


    yup that's what i said
  • give it a margin:0 and it should work for ya (FF at least).
  • margin:0 did the trick... and it worked for both IE and FF. Thanks, jhallmusic (and others, too)
  • "pab" said:
    [quote="Adam"][quote="pab"]you can try setting it for firefox and then through conditional comments feed the working css rules to ie7 only


    It would be better to fix the general style sheet for firefox and then have a conditional style sheet for IE. If it looks wrong in FF it's probably skewed in most other browsers too.[/quote]


    yup that's what i said[/quote]

    last time i look at the forum after getting back from the pub, lol