3 div independently relative and top aligned

Question

How to (top) align 3 div that should be relative to a previous div (but not between them)?
I can't use floats or position:inline-block (if you set display:none on 2 divs the last one shouldn't move).
position:absolute neither because there's a relative footer underneath.
vertical-align:top doesn't work using spans - any workaround?

I tried using a wrapper but it can't work cause the height of the divs is not fixed.
The height of the wrapper gets completely ignored anyway (by the following footer) unless Im using relative children.

Any ideas?

Answer 1

HTML
the order is important and the wrapper is optional (to position the side divs)

<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
</div>
<div id="footer"></div>

CSS

#left {float:left}
#middle {margin:0 auto}
#right {float:right}
#footer {clear:both}

unless someone comes up with something easier ill accept my answer in 24h