Pyramind of DIVs

Question

Hi there,

I'm trying to build a pyramid that's made of 4 DIVs. The layout looks like this:

     ------
     | #1 |
     ------
----------------
| #2 | #3 | #4 |
----------------

Moreover I need 3 additional DIVs starting at the center DIV (#3) and containing either #1, #2 or #3 additionally. These DIVs are used the build a sliding effect with jQueryUI later on. It's supposed to look like #1, #2 and #4 slide out of #3.

The margin between the DIVs is supposed to be 2 pixels. I also want the whole block to be centered.

Even with display: inline; and position: absolute; enabled on the visible and invisible DIVs I can't get the layout right. I used some negative margins and when it looked ok for the first time I saw that my top DIV was positioned outside of the html body.

I suppose there is a more simple and elegant way to achieve what I want.

Every kind of advice regarding either this specific problem or something you see that could improve my CSS is more than welcome. Thanks in advance

Sebastian

Here's what I've got so far:

HTML:

<div id="centerbox">
    <div id="main">main</div>
    <div id="rail_top">
        <div id="top">top</div>
    </div>
    <div id="rail_left">
        <div id="left">left</div>
    </div>
    <div id="rail_right">
        <div id="right">right</div>
    </div>
</div>

CSS:

#centerbox {
    height: 602px;
    width: 904px;
    margin-top: 640px;
    margin-left: auto;
    margin-right: auto;
}
/* blue */
#main {
    background-color: #33F;
    height: 300px;
    width: 300px;
    margin: 2px;
    z-index: 9999;
    position: absolute;
    display: inline;
    margin-left: 302px;
}
/* green */
#top {
    background-color: #3F0;
    height: 300px;
    width: 300px;
    z-index: 1;
    position: absolute;
    display: inline;
}
/* pink */
#left {
    background-color: #F06;
    height: 300px;
    width: 300px;
    z-index: 1;
}
/* orange */
#right {
    background-color: #FC0;
    height: 300px;
    width: 300px;
    z-index: 1;
    margin-left: 302px;
}
#rail_top {
    height: 602px;
    width: 300px;
    display: inline;
    position: absolute;
    margin-top: -300px;
    margin-left: 302px;
}
#rail_left {
    height: 300px;
    width: 602px;
    float: left;
    position: absolute;
    display: inline;
    margin-top: 2px;
}
#rail_right {
    height: 300px;
    width: 602px;
    float: right;
    position: absolute;
    display: inline;
    margin-left: 302px;
    margin-top: 2px;
}