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?

I don't see anything floating out http://jsfiddle.net/mZNwh/ — Mr. Alien, Nov 04 '12 at 09:26
Does `overflow: hidden` on the `#smallImages` element fix the issue? — Itay Grudev, Nov 04 '12 at 09:27
Because floated element is taken out of normal flow and its parent is considering it non existent. You can find great explanation on it and how to fix it in different ways [here](http://coding.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/). — Marko Francekovic, Nov 04 '12 at 11:04

score 3 · Accepted Answer · edited May 23 '17 at 12:15

3

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

edited May 23 '17 at 12:15

Community

1
1

answered Nov 04 '12 at 09:32

David Pärsson

6,038
2
37
52

Can you explain..why they are not considered as part of the parent elements height? if I float an element, does it get completely out of its flow? – Dmitry Makovetskiyd Nov 04 '12 at 09:33
I'd say it's this way because that's the CSS definition, which can be found here: http://www.w3.org/TR/CSS2/visudet.html#normal-block – David Pärsson Nov 04 '12 at 09:49

floating elements inside a div

1 Answers1