floating div within div not working as expected

Hi
I am floating a div within a div with float attribute set on the child div. Not sure why the child div is displayed outside the parent. Any help would be appreciated.

HTML:

<body>
<form action="/login" method="post">
<div class="outer">
   <div class="header"></div>
   <div class="bg-image">
        <div class="login">
        </div>
   </div>
   <div class="clearer"></div>
   <div class="footer"> </div>
   <div class="bottom"></div>
</div>
 </form>
</body>

Here is the css code;

.header {
        background-color: rgba(231,152,51,1);

Syndicate content