A Div with a floating Div inside, won't fit to the content

Question

<div style="background-color:black">
   <div style="float:right">
       Test message
   </div>
<div>

This will show 'Test message' with white background because the parent div didn't fit the content.

How can make the div fit to the content? (without using table, or display:table since it's not supported in IE)

Answer 1

You can also do this:

<div style="background-color:black; overflow: auto;">
   <div style="float:right">
       Test message
   </div>
<div>

It's a cleaner way to do the clearfix :)

Answer 2

A common solution is to put a <br style="clear: both;"> after the floating element to clear the float and cause the parent element to wrap the elements.

<div style="background-color:black">
   <div style="float:right">
       Test message
   </div>
   <br style="clear: both;">
<div>

Apart from the problem, I'd suggest to put the styles in a separate CSS file, if not realised yet.