...

View Full Version : Problems At Ordering Multiple Div's for the Layout



Nemuro
05-15-2007, 11: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">

<!--Left Side-->

<div id="Left">

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

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

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

</div><!--Middle-->

<div id="Middle">

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

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

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

</div>

<!--Right Side-->

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

koyama
05-16-2007, 02:37 AM
I see that you want a flexible layout with page width that is magnified under text-zoom. This prevents you from using a single vertically repeating background image for the whole page.

Well, since you have a fixed-width-layout, you might as well give #Middle a fixed width too. Then float all three elements #Left, #Middle, #Right to the left. That should give approximately what you want.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum