html - Why are my div's not placed "inside" the wrapper div? -

in following code, #wrapper div contains #left , #right div. not turn out contained inside #wrapper div.

i want them treated content of #wrapper div, contained inside it, leaving 10px padding applied #wrapper. why displaced?

jsfiddle here.

<div id="wrapper">     <div id="left">alpha</div>     <div id="right">bravo</div> </div> 

the css follows.

#wrapper {     background-color:grey;     border-top: 1px solid black;     border-botton: 1px solid black;     padding:10px; } #left {     background-color:yellow;     float:left; } #right {     background-color:pink;     float:right; } 

i want solve without manipulating position attributes of #wrapper might disrupt normal structure of page (i'm afraid so).

because floating them sit outside of dom flow. if want parent consider them, add overflow: hidden parent css or add div @ bottom of container rule clear: both;

demo : http://jsfiddle.net/cros1mrv/1/