Float on Google Chrome and Microsoft Edge - css

Question

I'm using float to align 3 div ( left, center, right ). the first picture show how it looks on
on Google Chrome. the second picture show how
it looks on Microsoft Edge . a float works fine on Google Chrome, when using Microsoft Edge the last div(right) moved to a left-bottom container. why this is happens
* body,
p,
img {
margin: 0;
}
.container {
width: 900px;
border: 5px solid green;
padding: 3px;
margin: auto;
}
.left {
background-color: blueviolet;
width: 150px;
height: 300px;
line-height: 100px;
text-align: center;
float: left;
}
.center {
width: 600px;
height: 300px;
background-color: burlywood;
float: left;
}
.right {
width: 150px;
height: 300px;
background-color: coral;
float: left;
}
.clear {
clear: left;
}
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
<div class="clear"></div>
</div>

Answer 1

The CSS you wrote make the output appear as in the picture. In your container you used border and padding. The two will cause the actual width of the container to be less than 900px on some browser. So the width is 900 - (5 + 5) - (3 + 3) = 884px.
Possibly, chrome tried to understand what you want, but Edge give you actual output. This is expected as border and padding affect the final width of div containers. Though, setting margin does not affect it.
To resolve the issue and cause the three dogs to appear on same line on all browser, i.e the coral div to appear on the right, you will add the following CSS to your container (or preferably body tag):
box-sizing: border-box;
You can read more at https://css-tricks.com/box-sizing/
Don't forget to add all the Vendor Prefixes