Hey guys, here is one I need help with, I'm still learning.

I have a page layed out as such

Header
Body
Footer

all wrapped up in a 775px wide, horizontally centered(margin: 0 auto 0 auto;) container.

I need a a bunch of 50 px wide images to run along the left edge of this container.
So I tried two of the following ideas, but I ended up with problems.

A, I place a 50 px wide image in the body and give it a margin of -50. It works in Firefox, but in IE 6 the image disappears as it reaches the left edge of the container div.

B, make a second copy of the container and add 100 px to the width, then give it a z-index of 1 and the main container a z-index of 2, then place my 50 px wide image aligned left in the empty container underneath. The problem with this has been that neither browser is rendering the layers properly, it basically ignores them.

I also validated and corrected all my code.

Thanks for any help.

CSS
QUOTE

/* body */
#standard_body {
margin:0px 0px 0px 0px;
background-color:rgb(25,28,37);
background-image:url(newbg.jpg);
background-repeat:no-repeat;
background-position:top;
overflow:scroll;
overflow:-moz-scrollbars-vertical
}
/* Main containers */
#main_container {
position:relative;
height:100%;
width:775px;
margin:0px auto 0px auto;
padding:0px 0px 0px 0px;
text-align: left;
z-index:2
}
#main_container0 {
position:relative;
height:100%;
width:875px;
margin:0px auto 0px auto;
padding:100px 0px 0px 0px;
text-align: left;
z-index:1
}
/* Containers */
#banner_container {
height:255px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
background-image:url(bannerimage.jpg);
background-repeat:no-repeat
}
#content_container {
position:relative;
margin:0px 0px 0px 0px;
padding:0px 23px 20px 22px;
background-color:#0d1222
}
#left_container {
float:left;
width:70%;
font-family:Verdana, Verdana, Geneva, sans-serif;
font-size:11px;
color:#FFFFFF
}
/* Subnavigation, collapsing menu Styles */
#right_container {
float:right;
height:100%;
width:30%;
padding-top:15px;
text-align:right;
font-family:Verdana, Verdana, Geneva, sans-serif;
font-size:11px;
color:#417ae0

}
#blank_box {
clear:both
}
/* Footer Specific Styles*/
#footer_container {
height:15px;
margin:8px auto 20px auto;
padding:5px 15px 5px 15px;
background-color:#93cc83;
font-family:Verdana, Verdana, Geneva, sans-serif;
font-size:11px;
color:#041529
}
#footer_left {
float:left;
width:40%;
text-align:left
}
#footer_right {
float:right;
width:60%;
text-align:right
}
.footerlinks {
font-family:Verdana, Verdana, Geneva, sans-serif;
font-size:11px;
color:#041529;
text-decoration:none
}
.footerlinks:hover {
color:#9D0B15
}
/* Spans */
.titletext {
font-family:Georgia, Times New Roman, Times, serif;
font-size:24px;
color:#93cc83
}
.desctext {
font-family:Verdana, Verdana, Geneva, sans-serif;
font-size:10px;
font-style:italic;
color:#999999
}
.bluetext {
color:#417ae0
}
.orangetext {
color:#f78f1e
}
/* Red-Dashed Horizontal Rule */
hr.red_dashed {
border: none 0;
border-top: 1px dashed #000000;
border-bottom: 1px dashed #9D0B15;
width: 97%;
height: 2px;
margin: 10px auto 9px -2px;
text-align: left
}
/* Main navigation links*/
.hlinks {
font-family:Verdana, Verdana, Geneva, sans-serif;
font-size:10px;
color:#FFFFFF;
text-decoration:none
}
.hlinks:hover {
color:#93cc83
}
/* Image Links*/
.piclinks {
border:0px;
}
/* Subnavigation Links*/
.featurelinks {
font-family:Verdana, Verdana, Geneva, sans-serif;
font-size:11px;
color:#417ae0;
text-decoration:none
}
.featurelinks:hover {
color:#9D0B15
}
.subnavilinks {
font-family:Verdana, Verdana, Geneva, sans-serif;
font-size:11px;
color:#417ae0;
text-decoration:none
}
.subnavilinks:hover {
color:#ff9000
}
img {
border:none;
}


HTML
QUOTE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" href="csstyle.css" />
</head>
<body id="standard_body">
<div id="main_container0"><img width="50px" height="50px" src="50px.jpg" /></div>
<div id="main_container">
<div id="banner_container"></div>
<div id="content_container">
<div id="left_container">
<!--New Topic-->
<span class="titletext">Welcome!</span><br />
<span class="desctext">August 2008/span>
<hr class="red_dashed" />
Welcome
</div>
<div id="right_container">
<a class="featurelinks" href="service_photo.htm">Photography</a><span class="orangetext">+</span><br />
<br />
<a class="featurelinks" href="service_design.htm">Design</a><span class="orangetext">+</span><br />
<br />
<a class="featurelinks" href="service_crafts.htm">Crafts</a><span class="orangetext">+</span> </div>
<div id="blank_box"></div>
</div>
<!-- footer with copy right and information for visitors-->
<div id="footer_container">
<div id="footer_left"> Copyright</div>
<div id="footer_right"><a href="disclaim.htm" class="footerlinks">Disclaimer</a> | <a href="privacy.htm" class="footerlinks">Privacy Policy</a> | <a href="terms.htm" class="footerlinks">Terms & Conditions</a> | <a href="contact.htm" class="footerlinks">Contact</a> </div>
</div>
</div>
</body>
</html>