Why do floats retain the phantom space when they go to the next line?

Question

I play with the properties of CSS elements and wrote this code:

body { font-family: "Helvetica"; } .parent { background-color: yellow; overflow: auto; padding-bottom: 20px; display: inline-block; } .col { height: 200px; padding: 20px 10px; float:left; margin: 10px 10px; } .red { background-color: red; } .green { background-color: #00ff00; } .blue { background-color: #0000ff; color: white; } p:hover { background-color: #ffff00; } 

Why is it that when I run the result and resize the screen until the blue float is cleared to the next line, the yellow outline of the parent div does not change the width?

Sorry if this is confusing. Here is a good example of what I mean:

https://www.dropbox.com/s/9r7mhizfqdbyflh/Screenshot%202014-12-24%2001.02.36.png?dl=0

Why is there yellow space in spite of the fact that it was an integrated unit? Is it because the float keeps the reserved space there, although it is cleared to the next line?

JSFiddle: http://jsfiddle.net/ffxg9qq0/1/embedded/result/

Thanks!

Answer 1

space was the reason due to float:left children

you will need to write an @media request for .parent configure

 @media screen and (max-width: 400px){ .col{ float:none; } } 

resize below script to max-width 400px

demo - http://jsfiddle.net/ffxg9qq0/3/

 body { font-family: "Helvetica"; } .parent { background-color: yellow; overflow: auto; padding-bottom: 20px; display: inline-block; } .col { height: 200px; padding: 20px 10px; margin: 10px 10px; float: left; } .red { background-color: red; } .green { background-color: #00ff00; } .blue { background-color: #0000ff; color: white; } p:hover { background-color: #ffff00; } @media screen and (max-width: 400px) { .col { float: none; } } 

 <div class='parent'> <div class='col green'> <p>I'm in a green float!</p> </div> <div class="col red"> <p>I'm in a red float!</p> </div> <div class="col blue"> <p>I'm in a blue float!</p> </div> </div>