Question

I’m trying to create a vertically positioned DIV by percentage. I have the parent container to set to relative and the content div set to absolute. This works fine when I position the content div with pixels, but when I try percentages the percentages are disregarded:

.container {
position: relative;
}


.content {
position: absolute;
left: 10%;
top: 50%;
}


<div class="container"><div class="content"> This is the content div. It should be 10% from the left of the container div.
</div></div>

The content div appears at the top of the page, disregarding the 50% vertical placement. What am I missing? Thanks in advance!

Answer 1

The absolutely positioned element is taken out of the natural flow of the document which means your container has zero height and width.

10% and 50% of that zero height and width are, of course, zero.

If you give your container a height and width, your percentage positions will start to work as you want.

Here is a working example.

.container { position: relative; width:500px; height:500px; }