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

I have a div tag that expands (horizontally and vertically) depending what I have in it. I have:

<div id="summary" style="float:right;margin:5px 5px 0;" ALIGN="right"> 

I also put a table within it to hold all my information:

<table style="margin-left:1em; border:2px solid #000000; background-color:#f2f2f2; padding:1px; float:center; clear:right; font-size:85%;">

Answer 2

Add this in your CSS file:

.group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .group {display: inline-block;}
/* Hides from IE-mac \*/ * html .group {height: 1%;} .group {display: block;} /* End hide from IE-mac */

And add the "group" class to your block div so the float is cleared:

<div class="block group">
...

Answer 3

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 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.