Grow your CSS skills. Land your dream job.

vertically align to the bottom of a div?

  • # June 18, 2008 at 7:06 pm

    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

    # June 18, 2008 at 11:03 pm

    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.

    # June 19, 2008 at 12:44 am

    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?

    pab
    # June 19, 2008 at 1:05 am

    you can try setting it for firefox and then through conditional comments feed the working css rules to ie7 only

    # June 19, 2008 at 1:50 pm
    "pab" wrote:
    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.

    pab
    # June 19, 2008 at 6:21 pm
    "Adam" wrote:
    "pab" wrote:
    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.

    yup that’s what i said

    # June 19, 2008 at 7:21 pm

    give it a margin:0 and it should work for ya (FF at least).

    # June 20, 2008 at 2:26 am

    margin:0 did the trick… and it worked for both IE and FF. Thanks, jhallmusic (and others, too)

    # June 20, 2008 at 3:53 pm
    "pab" wrote:
    "Adam" wrote:
    "pab" wrote:
    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.

    yup that’s what i said

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

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".