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

Home Forums CSS Text align issue in Safari with inline-block divs

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #165224
    Mark H

    Hi all I’m having an issue with Safari basically the divs wrapped around the text are aligning based on the text length and where it sits on the bottom line rather than all aligning correctly as in chrome.

    If you could check this CodePen out it makes more sense:
    CodePen Link

    If you try it in Safari then in Chrome you should see the difference, any idea what is causing this?

    EDIT: I have to use Overflow hidden on Chrome to get it to work??



    Add vertical-align:top; and remove the overflow.

    It’s a function of the inline-block


    With inline-block there is this whitespace thing that you have to deal with in the HTML, no?


    With floats and a grid you get something like this, which is a bit more sturdy I think, …. but maybe you have reasons for not wanting floats, or extra HTML-markup …



    With inline-block there is this whitespace thing that you have to deal with in the HTML, no?

    Yes there is, but there are a couple of fixes (font-size:0 for one) and I’ve always considered using in on a par with floats (which you have to clear).

    I just mentioned the vertical-align because display:inline-block was already being used in the Codepen.

    Both have their upsides and downsides and both require some finagling. There are situations where I will use one over the other (centered menus really scream inline-block to me) but I have no particular preference.

    Fortunately, flexbox is on the rise…I just have to learn it properly. :)

    Mark H

    @Paulie_D & @Atelierbram

    Thanks the Vertical-align: top has solved it for me. I wanted to use inline-block over floats as I’ve been reading a lot lately how floats are pretty bad practice. I was looking at using Flexbox but as it’s not fully baked in the browsers (Firefox) yet I thought I’d hold off. I do like how I can center divs very easily with inline-block too.


    +1 to all that.

    Ditto absolute positioning….it has it’s place (no pun intended)…used sparingly. :)

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