The issue arises from the slight height difference between the first two blocks compared to the other two.
As a result, the fourth block overlaps the right edge of the second block.
You can resolve this by setting the height of .block to 160px, which will display them correctly as intended.
This problem commonly occurs when floated elements have varying heights.
Note: The varying behavior across browsers may be attributed to default font and font size differences. Adjusting the font size slightly smaller would lead to uniform min height for all blocks, thus eliminating the issue. (Try setting font-size: 0.75em on .block to observe the effect!)
$('.block').each(function (i) {
$('body').append('height of block' + i + ': ' + $(this).outerHeight() + '\n');
});
.container {
width: 802px;
border: 1px dotted blue;
overflow: auto;
}
.block {
float: left;
width: 33.333%;
background-color: #bbb;
padding: 40px;
border: 10px solid #fff;
box-sizing: border-box;
min-height: 155px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="block">Lorem ipsum dolor sit amet, consectetuer adipiscing eli.</div>
<div class="block">Lorem ipsum dolor sit amet, consectetuer adipiscin.</div>
<div class="block">Lorel eum</div>
<div class="block">Lorem ipsumdentur parum clari,um.</div>
</div>