Question

I am trying to make vertical-aligned div in relation to auto height div.
It is a little bit hard to explain so I have screenshot that will explain everything:

The orange div is the container.
The blue div is 2nd container inside the main container.
The green div is the vertical-aligned div which should be aligned in relation to the blue one.

I have no idea how to make this work. I want it to be cross browser (ie6+, ff & chrome).

Thank you very much!

Answer 1

See: http://jsfiddle.net/thirtydot/aeFrH/

CSS:

#container {
    width: 748px;
    background: orange;
}
#container-inside {
    width: 500px;
    background: cyan;
}
#aligned {
    width: 248px;
    background: green;
}
#container-inside, #aligned {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}

HTML:

<div id="container">
    <div id="container-inside">
        Some<br />
        content<br />
        is<br />
        in<br />
        here.<br />
    </div><div id="aligned">
        Aligned.
    </div>
</div>