Grow your CSS skills. Land your dream job.

Why is setting min-height causing elements to drop down?

  • # May 14, 2013 at 11:16 am

    Afernoon all,

    I’ve got a problem that’s been driving me nuts all afternoon, maybe a fresh pair of eyes could fix the solution.

    If you look at my link below and then look for a section called ‘BACK CATALOGUE’on the sidebar and look at the title tabs with a little arrow pointer at the bottom. These tabs are styled anchor elements, with a min-height: 60px which I set to try to create equal height tabs as without it, when the screen width changes size, the text contents wraps to two lines on some but not all of the tabs.

    But if you notice on resize in mobile window sizes, when the wrapping to two lines happens the whole elements shifts about 12 pixels down. I have checked in inspector for margin-top and I cant find anything? Help!

    [v2.seasiderspodcast.co.uk](http://v2.seasiderspodcast.co.uk/ “http://v2.seasiderspodcast.co.uk/”)

    # May 14, 2013 at 11:24 am

    Derivative much?

    # May 14, 2013 at 11:39 am

    Of this site do you mean? Yes it is. I’m working through Chris’s V10 redesign videos and applying what I learn as I go.

    # May 14, 2013 at 12:38 pm

    add vertical-align: top to #sidebar #catalogue nav a { }

    # May 15, 2013 at 4:51 am

    Cheers mate, it worked. I’d never even heard of that property before, last time I used that it was in table based design!

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

You must be logged in to reply to this topic.

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