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

I had the same problem. I got the wrapper element to wrap the content by setting the wrapper element's display to "table". So for your situation try

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

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.

REMOVE float:left from Image style and height:Auto from block style

ADD display:inline-block; in block style (container style)