Div with floating div inside, will not match the content

Question

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

This will show a “test message” on a white background, because the parent div does not match the content.

How to make div suitable for content? (without using a table or display: a table since it is 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>

This is a cleaner way to make clearfix :)

Answer 2

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

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

Besides the problem, I would suggest putting styles in a separate CSS file if it is not already implemented.

Answer 3

This seems to be an old clearfix problem. This is almost a complete necessity when using css and floats for layouts. See http://www.webtoolkit.info/css-clearfix.html for a brief description and fix. Or for a deeper overview, see here http://www.positioniseverything.net/easyclearing.html