CSS Overflow Hidden Workaround?

Question

Wondering if anyone has a work around for this issue.

I've got a markup like this:

<div id="outer">
<div id="inner">
content here
</div>
</div>

now my inner div isnt always extending as far as I would like it.

Overflow: hidden; works wonders, but in this case I have some elements that overlap the edge so I cant use that. Float:left; is good but I dont want to specify a width every time.

Ideally I want it to look like this:

Answer 1

If you're referring to clearing floats, since you seem to lack CSS in the example then you'd just use a clearfix:

#outer:after {
    content:"";
    clear:both;
    display:block;
}

#outer { zoom:1; }

If not, please include the full HTML/CSS in a jsfiddle or link to the real thing.