html - Content goes out of div -

really can't figure out what's wrong it, content add div, goes out of it, it's not in it.

check here: jsfiddle!

html___

<div id="wrapper">     <div id="container">         <div id="header">             <div id="logo">                 text goes outside of div :'((             </div>         </div>     </div> </div> 

css___

#container {     width: 960px;     margin: 20px auto 0 auto;     background: yellow; }  #header {     position: relative;     width: 100%;     background: yellow;     border: 1px solid black;     padding: 2px; /*just see div*/ }  #logo {     float: left; } 

you need clear floats:

<div id="wrapper">     <div id="container">         <div id="header">             <div id="logo">                 text appears inside div :)             </div>             <div style="clear: both;"></div>         </div>     </div> </div> 

because you've floated logo, content following wrap around it. causing effect you're seeing.