floating elements inside a div

Question

I have got this structure:

    <div id="wrapper2">
<div id="smallImages">
    <span>
       Small Image 1
    </span>
      <span>
          Small Image 2
    </span>
      <span>
          Small Image 3
    </span>
</div>  
   </div>

The problem is when I try to float the spans that are inside that div. When I float them, they get off the flow of the div.. the div actually lie above them.. Note that they all fit the divs width.

CSS:

#smallImages{
    margin:auto;
    background-color:#267990;
    width:300px;
}


#smallImages span{
    background-color:#f18e99;
    width:90px;
     height:150px;
     display:block;
float:left;
  }

why does it happen?

Answer 1

Floating element are not considered when calculating the height of parent elements, if the parent's overflow is set to visible according to the CSS2 specification.

There are however CSS hacks to get around this: https://stackoverflow.com/a/11597829/384617