How to make a div expand vertically to wrap the content within it?

Question

I have a div which wraps a number of images that are generated dynamically. I don't know how high the list of images is. My problem is the div that contains the dynamically generated images doesn't behave like it is housing any content - I want it to extend to the height of the list of images. Each image is itself wrapped in a div.

This is the wrapper div:

.block { padding:10px; margin-top:10px; height:auto; background-color:#f9f9f9; } 

This is the markup dynamically generated for (one of) the images:

<div class="block"> <div style="float: left; padding: 2px 2px 2px 2px;"><IMG SRC="45.jpg" BORDER="0"/></div> ..... 

How do I get the block div to extend down with the images?

Thanks

Answer 1

The problem you're observing happens when you float an element, which takes it out of the normal flow of the elements (by normal flow I mean the way the elements would appear with no styling). When you float an element, the other elements still in the normal flow will simply ignore it and do not make room for it, which is why your block div does not extend the full height of your image.

There are a few different solutions:

1) Add the rule overflow: hidden; to the block class:

.block { overflow: hidden; padding:10px; margin-top:10px; height:auto; background-color:#f9f9f9; } 

2) Add a element after your image that clears the floating:

<div class="block">     <div style="float: left; padding: 2px 2px 2px 2px;"><IMG SRC="images/login1.png" BORDER="0"/></div>     <div style="clear: both;"></div> </div> 

Both will work, but I prefer the first solution.