Question

I have a website on which I’m trying to float a div to be vertically centered inside it’s parent div. The code I’ve used is basically this;

#box_to_be_floated_vertically {
    position:relative;
    top:50%;
}

It looks like it should work, but it doesn’t?

For my example, look here: http://www.dronnoc.com/temp/index.php
If you look on here, it’s the div floating on the side of the sidebar, with the ID #handle. I’ve tried also using #sidebar > #handle but that made no difference.

Any ideas or solutions? I’ve struggled with this for days.

EDIT

I’d like to point out that in my example site, if I physically put in a pixel height in the top property, it works fine. The issue lies when I try to use a percentage.

Answer 1

Use this:

#box_to_be_floated_vertically {
    position: absolute;
    top: 50%;
    margin-top: -XXpx;
    }

XX – height of the element divided by 2

The container must have position:relative;