Parent <div> not wrapping child element with float attribute

Question

Please look at this example and explain to me why the green <div> does not wrap itself around the orange <div>.

<div id='green'>   <div id="orange"></div> </div>  #green{     border: 20px solid #3D3; }  #orange{     width :100px;     height: 100px;     border: 10px solid orange;     float: left; } 

Answer 1

Try adding float:left and display:block to the outer div

see updated example - http://jsfiddle.net/jordanlewis/gDtSZ/1/

Answer 2

Elements do not expand to contain floated children by default.

There are a number of workarounds, such as floating the parent, using a clearfix or adding overflow: hidden to the parent.

Personally, I try and use the latter.

Here is your jsFiddle working.