I am in the following situation:
I have a container that has display set to inline-block. So the width of the container depends on the content inside it.

Inside the container I have two divs floated left;both have fixed width;the divs float next to each other where the browser window width is bigger that the sum of the widths the two divs have. 

But, and here comes my problem, when I shrink the browser window so that the two divs won't fit next to each other anymore, the second floated div goes under the first floated div (as it should, I am happy with this), but the width of the container does not modify, even though the second div isn't there anymore, the container still preserves the space for it. I would link the container to shrink as well to the width of the bigger floated div.

Any help would be apreciated. Thanks a lot! 

```
.Container {
    position:absolute;
    top:180px;
    width:100%;
    text-align:center;
    background: #DDD;
}
.Container span {
    position:relative;
    margin-top:0px;
    text-align:left;
    display: -moz-inline-stack;
    display:inline-block;
    zoom: 1;
    *display: inline;
    cursor:default;
    background: red;
}
.div1 {
    display:block;
    float:left;
    padding:0;
    width:100px;
    background: coral;
}
.div2 {
    display:block;
    float:left;
    padding:0;
    width:200px;
    background: #45dc2a;
}

```

HTML

```
<div class="Container">
    <span>
        <div class="div1"></div>
        <div class="div2"></div>
    </span>
</div>

```

Demo: <http://jsfiddle.net/C4Hcm/>