Problems At Ordering Multiple Div's for the Layout [Archive]

Nemuro

05-15-2007, 10:22 PM

First of all, it's nice to have found this forum, and I greet you all, second, let me state my problem:

I am using MainContainer to hold all of the child divs.

I am trying to align the divs like this:

Left Middle Right
Topleft MiddleTopMargin TopRight
LeftBorder MiddleContent RightBorder
BottomLeft MiddleBottomMargin BottomRight

The problem is the div's are not aligned properly, they are cascading, How can I align them in columns?
Also, where is my mistake?
( i tried float for Right and Left, but still nothing...

Here is the link::Link (http://brcosmin.evonet.ro/test/)

If it is of any use, here are the codes:

This is the HTML(just the body):
<body>
<div id="MainContainer">



<div id="Left">

<div id="Topleft">
</div>

<div id="LeftBorder">
</div>

<div id="BottomLeft">
</div>

</div>

<div id="Middle">

<div id="MiddleTopMargin">
</div>

<div id="MiddleContent">
</div>

<div id="MiddleBottomMargin">
</div>

</div>



<div id="Right">

<div id="TopRight">
</div>

<div id="RightBorder">
</div>

<div id="BottomRight">
</div>

</div>

</div>
</body>

This is the external CSS:
body {
background-image:url(img/Background.gif);
background-repeat:repeat-x;
background-color:#000000;
}

#MainContainer {
margin: 0% auto;
width: 50em;
height: 70em;
vertical-align:top;
}

/*Left Side*/

#Left {
width: 11px;
height: 100%;
background-color:black;
}
#TopLeft {
background-image: url(img/TopLeft2.gif);
height: 11px;
width: 100%;
background-repeat: no-repeat;
}
#LeftBorder {
background-image: url(img/Vertical.gif);
height: 100%;
width: 100%;
background-repeat: repeat-y;
}
#BottomLeft {
background-image: url(img/BottomLeft.gif);
height: 11px;
width: 100%;
background-repeat: no-repeat;
}

/*Middle*/

#Middle {
width:auto;
height:100%;
background-color:sienna;
}

/*Right*/

#Right {
width:11px;
height:100%;
float:right;
background-color:black;
float:right;
}
#TopRight {
background-image:url(img/TOPright2.GIF);
background-repeat:no-repeat;
height:11px;
width:100%;
}

#RightBorder {
background-image:url(img/VerticalRight.gif);
background-repeat:repeat-y;
width:100%;
height:100%;
}
#BottomRight {
background-image:url(img/BottomRight.GIF);
background-repeat:no-repeat;
height:11px;
width:100%;
}