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.

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;
}