Vertical-align div in relation to auto height div

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:

enter image description here

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!

You haven't explained anything about width. What is the width of each of those three elements? — thirtydot, Jan 27 '12 at 12:43
The left one is 500 and the second is 248. Does it really matter? I will change it as soon as I get the principle... — Ron, Jan 27 '12 at 12:51
It would have mattered if your answer was "the green div is 200px and the blue div should take all the remaining space, the orange div is the width of the screen". That would have made it more difficult (especially considering you want IE6 support..). But, if everything is fixed width as you said, it should be quite easy. — thirtydot, Jan 27 '12 at 12:52

score 2 · Answer 1 · answered Jan 27 '12 at 12:55

For this answer I have assumed that both the blue as the green divs have a dynamic height.

In order to calculate the correct offset of the green div we can not use CSS. CSS doesn't allow us to position an element using the data of another element.

Instead, we need to calculate the offset ourselves which requires a client-side language. Time to embrace Javascript. To make it easier for us, I'll use jQuery because it does a lot of work for you using real sweet syntax.

So, we need to find out how to calculate the offset. First we need to know the center of the blue element. Easy enough: blue.height / 2. Next, we need to calculate how much the green div should go up when the top of the green div is aligned the actual center of the blue div. That's basically the half of the height of the green div, right? That gives us the next formula: (blue.height / 2) - (green.height / 2).

Alright, let's put that in javascript!

var center = $('div.blue').outerHeight(true) / 2; // this is the blue div
var offset = center - $('div.green').height() / 2;

And finally, setting the offset:

$('div.green').css({
    'margin-top': margin
});

Cool theory, but I'm sure you want to see it in action. You can see the demo here.

Edit:

Oh yeah, I forgot to mention that jQuery is a cross-browser framework and supports very, very old browsers.. Read all about it here!

I dont want javascript solution. I forgot to mention that... Anyway this is a good solution for those who want to use javascript. — Ron, Jan 27 '12 at 13:08
Well I prefer Javascript over CSS hacks, but glad you found a proper answer! — Tim S., Jan 27 '12 at 16:19

score 1 · Accepted Answer · answered Jan 27 '12 at 12:58

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>

answered Jan 27 '12 at 12:58

thirtydot

224,678
48
389
349

I'll explain this later. Tested in Chrome, IE7. Should work in IE6. – thirtydot Jan 27 '12 at 12:59
Works perfectly. Waiting for your explanation. I never used css property with *. Thank you very much. – Ron Jan 27 '12 at 13:11
In IE6, there's a 1px space line in the container. Fixed it using your answer from here http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements/5078297#5078297 – Ron Jan 27 '12 at 13:42
1

There are two significant things I have to explain here. **1.** due to the use of `inline-block`, the whitespace between `` and `
` is significant; ideally there shouldn't be any. **2.** `display: inline-block; *display: inline; zoom: 1;` is [explained here](http://stackoverflow.com/questions/5838454/inline-block-doesnt-work-in-internet-explorer-7-6/5838575#5838575).
– thirtydot Jan 27 '12 at 13:53

Vertical-align div in relation to auto height div

2 Answers2

Linked