layered div columns not lining up

What I'm trying to do is make a 3 column layout with header & footer but with a background behind the solid color content layers. The right column layers line up fine but the left column top layer I just can't seem to get into the correct position.

I'm by far not a master of css so I'm sure the answer is in my css coding maybe margins, position, or this z-index which is a new thing for me. Can anyone help me find my error(s)?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

div {
text-align:center;
}

div#page {
border:1px solid purple;
width:755px;
margin:50px auto;
padding:5px;
text-align:left;
position:relative;
}

div#header {
border:2px solid red;
width:750px;
height:30px;
}

div#left1 {
background-image: url(images/bkg2.gif);
background-repeat: repeat;
border:1px solid black;
float:left;
position: relative;
z-index: 11;
margin:10px 0 10px 5px;
height:500px;
width:150px;
}

div#left2 {
background-color: #DEC6B5;
border:1px solid black;
float:left;
position: relative;
z-index: 22;
margin:-40px 0 -40px 0px;
top:60px;
height:480px;
right:20px;
width:130px;
}

div#content {
background-image: url(images/bkg2.gif);
background-repeat: repeat;
border:1px solid black;
width:400px;
margin:10px 0 10px 175px;
min-height:500px;
height:500px
}

div#right1 {
background-image: url(images/bkg2.gif);
background-repeat: repeat;
position:absolute;
z-index: 33;
border:1px solid black;
margin:0;
top:50px;
height:500px;
right:10px;
width:150px;
}

div#right2 {
background-color: #DEC6B5;
position:absolute;
z-index: 44;
border:1px solid black;
margin:0;
top:60px;
height:480px;
right:20px;
width:130px;
}

div#footer {
border:2px solid red;
width:750px;
height:30px;
}

</style>

<div id="page">
<div id="header">Header</div>
<div id="left1"></div>
<div id="left2">Sidebar</div>
<div id="content"></div>
<div id="right1"></div>
<div id="right2">Sidebar</div>
<div id="footer">Footer</div>
</div>

[edited by: Pammi at 7:11 pm (utc) on July 28, 2008]

layered div columns not lining up

Pammi

Pammi

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week