CSS positioning panels problems

Question

I've been trying to make this layout for weeks now but i just cant seem to get it like this at all!

So if it's not to much trouble can some one try and get me a link or something like that so I can continue with my site.

Answer 1

Here's a step in (hopefully) the right direction.

Demo

Some very important things to keep in mind here:

positioning basics

setting an element's position to absolute will let you freely place it based on pixel coordinates, but it's usually a good idea to place it in a container to restrict it. You create a container for absolutely positioned elements by creating a parent with a position of relative (or anything other than the default, static).

use variable values (percentages)

Also, you want to position the elements with percentages so that it can be resized and to ensure centering. You can give an element a % width or height and it will be the % of the width or whatnot of its first non-static parent.

positioning the elements

You can then position the elements based on percent values using the left and top properties. Left for position:absolute elements indicate "some value from the left edge of the first non-static parent". Likewise for top, bottom, and right.

centering an element

to position an element with absolute positioning in the middle of its first non-static parent, you give it a left value of 50% and a top value of 50%. (50% of the parents width from the left edge of that parent and 50% of its height from the top). This will position the top left corner of the element in the middle to the parent. to center the element fully, you need to offset it by half its width and height. You can use margin-left and margin-right with negative values for this.

From there on you can just adjust as needed as I did in the provided demo. Study the code (also pasted below for future reference) and see how the elements are positioned and what properties where used.

HTML

<div class="container">

    <div class="block tl"></div>
    <div class="block t"></div>
    <div class="block tr"></div>
    <div class="block l"></div>
    <div class="center"></div>
    <div class="block r"></div>
    <div class="block bl"></div>
    <div class="block b"></div>
    <div class="block br"></div>

</div>

CSS

.container
{
    width: 300px;
    height: 300px;
    position:relative;
    margin:100px;
}

.block, .center
{
    width:25%;
    height:25%;
    background:#5aa;
    border-radius:10px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-12%;
    margin-top:-12%;
}

.center
{
    width:30%;
    height:30%;
    margin-left:-15%;
    margin-top:-15%;
}

.center
{
    border-radius:100%;
}

.tl
{
    left:20%;
    top:20%;
}
.tr
{
    left:80%;
    top:20%;
}
.br
{
    left:80%;
    top:80%;
}
.bl
{
    left:20%;
    top:80%;
}
.t
{
    top:10%;
}
.r
{
    left:90%;
}
.b
{
    top:90%;
}
.l
{
    left:10%;
}