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>

on all browsers it looks good even on Safari under Windows but under Mac the
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 -->

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


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