Grow your CSS skills. Land your dream job.

Equal headings height

  • # December 13, 2012 at 9:36 am

    Hi all,
    is there some CSS solution for this problem: http://jsfiddle.net/illycz/UMjA7/
    I don’t want to use height attribute or HTML table. I want flexible solution…

    Thank for reply

    Patrik

    # December 13, 2012 at 10:10 am

    try adding vertical-align: bottom; to .box

    if that’s not what you’re after, you’ll need to be more specific.

    # December 13, 2012 at 10:12 am

    I don’t think it’s possible with pure CSS.
    Here’s a solution with jQuery:

    http://jsfiddle.net/UMjA7/4/

    # December 13, 2012 at 10:48 am

    I’m assuming that the images are supposed to be on the same horizontal level REGARDLESS of the content of the h1?

    # December 13, 2012 at 11:03 am

    Aha, here we go…not EXACTLY what is required by pretty darn close: http://codepen.io/joe/pen/mLzyu

    # December 13, 2012 at 3:43 pm

    If the image has fixed height, try this one http://jsfiddle.net/z9sB2/

    # December 13, 2012 at 4:03 pm

    I dot think css can do it try jquery

    $(“#yourobject”).css(“height”, $(“#outerwraper”).height());

    That is what I did on [my site](http://www.bydbenjamin.co.uk).

    I do have discution on that site. Feel free to pots what you think of it.

    # December 14, 2012 at 2:10 am

    I think @Vasek17 has a good css solution. That’s how I would do it. If you want it to look consistant across the board and be flexible, I would just set the height at 100px and let the width be auto.

    # December 14, 2012 at 3:21 am

    Thanks to all,
    @wolfcry911 and @Paulie_D I need heading to be vertically aligned to top.
    @JoniGiuro and @Htmlmainiac I need pure CSS solution.
    @Vasek17 Thanks a lot, it seems that this is solution i was looking for.

    # December 14, 2012 at 4:02 am

    @Vasek17 The solution is working in all major browsers except FF. There is a problem with absolute positioning element inside table-cell element. Can you help with that? Thanks

    # December 14, 2012 at 6:17 am

    @illycz in FF, I just added `position:relative` to the wrapper too and it seemed to fix @Vasel17 solution.

    http://jsfiddle.net/Qe2fq/

    # December 14, 2012 at 6:41 am

    Thank @Paulie_D, works like a charm ;)

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

You must be logged in to reply to this topic.

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