The div on the inside is floated to the left. This makes that whole div outside the border of the containing div. If I take the "float: left" property away from it, then that entire div will be inside the containing divs borders. Why is this so, and what can I do to make the inside div inside the borders of the containing div, while keeping its float property.
<html> <body> <div class="maindiv" style="border:2px solid red;"><p>main Div that needs to expand based on content of "insidediv"</p> <div class="insidediv" style="border:1px solid blue; float: left; width: 100%;"><P>Insidediv<br><br><br><br><br><br><br><br><br><br><br><br><br>maindiv should expand dynamically based on the content of this div, and it should fully enclose this div</p></div> </div> </body> </html>