CSS wrap image or "center float"

Question

Hi,

I am using the following code to display a list of images and apply a drop shadow effect to each image. The images may vary in orientation but will always be a maximum of 120px.

To get this to work I am having to float:left the "shadow" container. By adjusting the margins of the container and it's image, I am able to simulate a drop shadow. (http://img200.imageshack.us/i/withfloat.png/)

The downside of this approach is that the image then becomes left aligned. If I remove the float the .shadow background spans the full width of the li and does not wrap the image. (see above url but "withoutfloat.png")

How can I get the shadow div to wrap the image and keep it centered within the li?

Css:

<style type="text/css">
    ul
    {
        list-style-type: none;
        position: relative;
        margin: 0;
        padding: 0;
    }
    li.box
    {
        display: inline;
        float: left;
        margin: 3px; 
        background: red;
        position: relative;
    }
    .wraptocenter
    {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        width: 120px;
        height: 120px;
    }
    .wraptocenter *
    {
        vertical-align: middle;
    }
    .shadow
    {
        background: blue;
        margin: 10px 0 0 10px !important;
        margin: 10px 0 0 5px; 

    }
    .shadow img
    {
        margin: -4px 6px 6px -4px;
    }
</style>

Html:

<ul>
    <li class="box">
        <div class="wraptocenter">
            <span>
                <div class="shadow">
                    <img src="Handler.ashx?id=936&size=103" />
                </div>
            </span>
        </div>
    </li>
</ul>

Answer 1

Remove the float but add overflow:auto to the containing element. That will make the non-floating element contain its inner floating elements the way you expect.