How can I ensure a DIV stretches to fit its contents?
css, html
Solution
set
overflow: auto;
for the outer div. This should make your parent div expand even though its children have a float property. (IE has a few problems with this, but can be fixed by some padding)
Problem
I have this HTML with a table: ``` <div class="currentDesignDiv" style="margin-bottom:5px;"> <div> <img alt="Thumbnail" src="http://www.propertyware.com/templates/ <bean:write name="currentTemplate" property="primaryKey"/> /thumb.gif"/> </div> <div> <table> <tr> <th>Your Current Design: </th> <td>Template #: <bean:write name="currentTemplate" property="primaryKey"/> </td> </tr> <tr> <th>Last Updated: </th> <td> <bean:write name="currentTemplate" property="modifiedByAsString"/> </td> </tr> <tr> <th>Total Pages: </th> <td> <bean:write name="numberOfPages"/> </td> </tr> </table> </div> ``` Being styled by this CSS: ``` .currentDesignDiv{ background-color:#e7e7e7; border:1px solid #9c9c9c; padding:5px; width:100%; min-width:860px; } .currentDesignDiv div{ float:left; width:33%; } .currentDesignDiv div table{ font-size:9pt; text-align:left; margin:17px; } .currentDesignDiv div:first-child img{ margin:17px; width:80px; } ``` It looks OK on my big monitor, but when I change to my small monitor the right-most `div`, which has an image inside of it, floats outside of the parent `div`. Does anybody have a solution for that?