Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

dock child elements in all corners of parent element

dock child elements in all corners of parent element

Problem

I have the following html5 body:


    
topleft
topcenter
topright
centerleft
centercenter
centerright
bottomleft
bottomcenter
bottomright

And I would like to achieve a dynamic layout that looks this:

Where as each content element should be layed out (docked) in the corners relative to its Parent container and all center elements should be centered at the respective sides. It should not matter what size or position the parent container has, so I cannot use absolute pixel coordinates for positioning.

This is what I have so far:

div#container {
    background: lightblue;
    position: relative;
    width: 500px;
    height: 500px;
}

div.content
{
    width: 100px;
    height: 100px;
    position: absolute;
    background: lightyellow;
    text-align: center;
    margin: auto;
}

div#topleft {
}

div#topcenter {
    right: 50%; /*obviously doesn't center*/
}

div#topright {
    right: 0px; 
}

div#centerleft {
    top: 50%; /*obviously doesn't center*/
    left: 0px;
}

div#centercenter {
    top: 50%; /*obviously doesn't center*/
    right: 50%; /*obviously doesn't center*/
}

div#centerright {
    right: 0px;
    top: 50%; /*obviously doesn't center*/
}

div#bottomleft {
    bottom: 0px;
}

div#bottomcenter {
    bottom: 0px;
    right: 50%; /*obviously doesn't center*/
}

div#bottomright {
    right: 0px;
    bottom: 0px;
}

It all works fine for the corners but of course all the center elements are not aligned centered and I understand why. I just don't know, how is this done in CSS3...

Problem courtesy of: bitbonk

Solution

To vertically center a fixed-height element in its parent, use:

top:50%;
margin-top:-50px;

For horizontal you can do the same with left and margin-left, or just not define anything and use "margin:0 auto" since it automatically fills them up equally left and right then.

Solution courtesy of: Niels Keurentjes

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

dock child elements in all corners of parent element

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×