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>
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 ?
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.
Comments
Post a Comment