Grow your CSS skills. Land your dream job.

Vertical Alignment Question w/ CodePen example

  • # August 12, 2012 at 6:01 am

    In the following example, what is the correct way to make the bottom of the “#left H2 tag” vertically align with the bottom of the “#right h3 tag” without touching the #left and #right in the CSS? In other words, what would I need to add to the H2 and H3 CSS to accomplish this?

    http://codepen.io/msguerra74/pen/rgzbi

    Thanks!

    # August 12, 2012 at 7:35 am

    You would have your divs left and right display as inline-block

    http://codepen.io/anon/full/oaqhc

    # August 12, 2012 at 8:52 am

    You would have to tweak the font-sizes, line heights and padding but it can be done.

    http://codepen.io/Paulie-D/pen/BaxIz

    # August 12, 2012 at 9:21 am

    @Paulie
    I see, haven’t thought about it that way.
    Could this also be done with span tag and just use H2 and assign smaller text to span?

    # August 12, 2012 at 4:03 pm

    You could, I suppose. If you have a reason for it…why not!?

    # August 12, 2012 at 7:17 pm

    I would also recommend using inline-block as suggested by @jurotek.

    # August 12, 2012 at 9:20 pm

    Thanks for the suggestions! I was playing with it by adding padding and stuff, but it seemed kind of messy to do it that way, so I was wanting a nice clean way of doing it. There are some more issues with it that I’m not sure about, but this gives me a good start. Thanks again!

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

You must be logged in to reply to this topic.

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