html - Min height and div growing as inner divs grow -

html - Min height and div growing as inner divs grow -

i have next code

html

<div class="content"> <div class="col"> </div> <div class="col"> </div> <div class="col"> </div> <div class="col"> </div> </div>

css

.content{ border: 1px solid black; width:940px; margin:auto; padding:10px; padding-top: 10px; -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75); box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75); min-height: 1000px; background-color: #ffffff; margin-bottom:0; } .col{ float:left; border: 1px solid red; background-color:blue; height: 2000px; width:18%; }

here fiddle.

i want content grow .col in height if col lower 1000px content remain in 1000px. isn't min-height property does? want fill col images have random height in different collumns not sure of total height of .col div.

as have floated .col doesn't expand parents height. need clear floats after .col element. may utilize :after pseudo element without adding additional markup :

demo

css :

.content:after{ content:''; display:block; clear:both; }

html css