floating div within div not working as expected

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.


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

Here is the css code;

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

Syndicate content