Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Equal headings height

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #41319
    illycz
    Member

    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

    #117229
    wolfcry911
    Participant

    try adding vertical-align: bottom; to .box

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

    #117230
    JoniGiuro
    Participant

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

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

    #117231
    Paulie_D
    Member

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

    #117235
    Paulie_D
    Member

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

    #117279
    Vasek17
    Member

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

    #117336
    illycz
    Member

    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.

    #117342
    illycz
    Member

    @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

    #117356
    Paulie_D
    Member

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

    http://jsfiddle.net/Qe2fq/

    #117361
    illycz
    Member

    Thank @Paulie_D, works like a charm ;)

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.