I did this small HTML code, just copy and paste into your notepad and test it to see what the heck i am talking about... how to fix this?! <br>2 divs Without the float <style type="text/css"> .a_main {background-color:#333;} .a_cell1 {height:50px; width:500px; } .a_cell2 {height:50px; width:500px; } </style> <div class=a_main> <div class=a_cell1>The background color is working for this</div> <div class=a_cell2>Is just working</div> </div> <br><br><p><br>2 divs WITH the float <style type="text/css"> .b_main {background-color:#333;} .b_cell1 {height:50px; width:500px; float:left;} .b_cell2 {height:50px; width:500px; float:right;} </style> <div class=b_main> <div class=b_cell1>But when adding a float ...</div> <div class=b_cell2>the parent div it will stop working...</div> </div>
You need to clear your floats because they have been taken out of the normal document flow, so anything that is left in the document that is not floated will push up to replace the floated element.