user3733648 user3733648 - 1 year ago 53
HTML Question

Mac Safari DIVs width is bigger than other browers

I am facing a problem which is only MAC Safari specific. my code looks like

<div class="wrapper" style="max-width:1220px">
<div style="width:50%;display:inline-block">First</div>
<div style="width:25%;display:inline-block">Second</div>
<div style="width:25%;display:inline-block">Third</div>
</div>


on all browsers it looks good even on Safari under Windows but under Mac the
third
DIV wraps to next line. Any idea?

Answer Source

As you stated in the comments, your s are displayed as inline-block. This means your code is actually applied as this:

<div class="wrapper">
    <div>First</div> <div>Second</div> <div>Third</div>
    <!-- Note that new lines are applied as whitespace -->
</div>

25% + 25% + 50% + whitespace > 100%

There are a few solutions for this, two of them are either: Write all your <div>s in one line, like this <div></div><div></div></div> without a newline

or

just use float: left instead of display: inline-block.