html - CSS - unexpected floating issue -


i learning floating elements in css , encountered following peculiar behavior.

here 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">         3 div     </div>        <div id="four">         4 div     </div>        <div id="five">         5 div      </div>        <div id="six">         6 div     </div>    </body>  </html>

enter image description here

my question why "four div" placed below "third div" not first , second ?

on other hand, if resize browser (see image below) why in case working ?

enter image description here

because second div element taller first div, forth div collides second div. when forth div drops next line, starts on right , slides left, beginning under third div, until collides second div. if @ code @ 4 div elements per line, fifth div drops next line. begins below fourth div , beginning moving left until collides second div, because second div longer third or fourth div elements.

enter image description here


Comments

Popular posts from this blog

account - Script error login visual studio DefaultLogin_PCore.js -

xcode - CocoaPod Storyboard error: -