I am learning floating elements in CSS and i encountered the following peculiar behavior.
Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#one { background-color: red; width: 200px; height: 200px; margin: 10px; }
#two { background-color: yellow; width: 200px; height: 205px; margin: 10px; }
#three { background-color: lightpink; width: 200px; height: 200px; margin: 10px; }
#four { background-color: green; width: 200px; height: 200px; margin: 10px; }
#five { background-color: coral; width: 200px; height: 200px; margin: 10px; }
#six { background-color: #b1ffea; width: 200px; height: 200px; margin: 10px; }
div{
/*display: inline-block;*/
float: left;
vertical-align: central;
}
</style>
</head>
<body>
<div id="one">
First div
</div>
<div id="two">
Second div
</div>
<div id="three">
three div
</div>
<div id="four">
four div
</div>
<div id="five">
five div
</div>
<div id="six">
six div
</div>
</body>
</html>
My question is why "four div" is placed below the "third div" not first and second ?
On the other hand, if i resize the browser (see image below) why in this case it is working perfectly ?
