asked on

I need to get this container to slip underneath my logo. How?

Head out to brucegust.com/campain and see how when you collapse the screen, the lower half of my right hand graphic remains on top of the logo. I need it slip underneath. How?

Here's my stylesheet:

body {
	font-family: Helvetica, Microsoft Sans Serif;
	font-size: 12px;
	color: #ffffff;
	vertical-align: top;
	padding: 0px;
	height: 100%;
	width: 100%;
	margin: 0;
	background-color:#000000;
}

#top_graphics {
height:227px;
}

#left-container {
position:absolute;top:0;
height:227px;
width:660px;
float:left;
background-image:url(images/header_01.jpg);
}

#top_filler {
height:227px;
background-image:url(images/header_02.jpg);
background-repeat: repeat-x;
}

#right-container {
position:absolute;top:0; right:0;
height:227px;
width:705px;
float:right;
vertical-align:top;
}

#right_top {
clear:both;
width:705px;
height:98px;
}

#right_bottom {
width:833px;
height:129 px;
}

#top_carousel {
background-image:url(images/header_right_02.jpg);
float:left;
width:833px;
height:129px;
}

#nav_bar {
height:26px;
background-image:url(images/menu_filler.jpg);
background-repeat: repeat-x;
}

#body_filler {
height:840px;
background-image:url(images/body_filler.jpg);
}

#tray_header {
margin-top:35px;
margin-left:auto;
margin-right:auto;
background-image:url(images/tray_header.jpg);
width:1000px;
height:11px;
}

#tray_center {
margin-left:auto;
margin-right:auto;
background-image:url(images/tray_center.png);
background-repeat:repeat-y;
width:1000px;
}

#tray_text {
margin-left:25px;
margin-right:25px;
font-family: Helvetica, Microsoft Sans Serif;
font-size: 14px;
color: #ffffff;
}

#tray_footer {
margin-left:auto;
margin-right:auto;
background-image:url(images/tray_footer.png);
background-repeat:no-repeat;
width:1000px;
height:11px;
}

#links_background {
margin-left:auto;
margin-right:auto;
background-image:url(images/links_background.png);
background-repeat:no-repeat;
width:1000px;
height:26px;
}

#links_background a.home {
margin-left:7px;
display:inline-block; /**** important ****/
width:162px;
height:26px;
background-image:url(images/home.png);
background-repeat:no-repeat;
}

#links_background a.home:hover {
margin-left:7px;
width:162px;
height:26px;
background-image:url(images/home_over.png);
background-repeat:no-repeat;
}

#links_background a.about {
margin:0px;
display:inline-block; /**** important ****/
width:162px;
height:26px;
background-image:url(images/about.png);
background-repeat:no-repeat;
}

#links_background a.about:hover {
margin:0px;
width:162px;
height:26px;
background-image:url(images/about_over.png);
background-repeat:no-repeat;
}

#links_background a.portfolio {
margin:0px;
display:inline-block; /**** important ****/
width:162px;
height:26px;
background-image:url(images/portfolio.png);
background-repeat:no-repeat;
}

#links_background a.portfolio:hover {
margin:0px;
width:162px;
height:26px;
background-image:url(images/portfolio_over.png);
background-repeat:no-repeat;
}

#links_background a.testimonials {
margin:0px;
display:inline-block; /**** important ****/
width:162px;
height:26px;
background-image:url(images/testimonials.png);
background-repeat:no-repeat;
}

#links_background a.testimonials:hover {
margin:0px;
width:162px;
height:26px;
background-image:url(images/testimonials_over.png);
background-repeat:no-repeat;
}

#links_background a.special_offer {
margin:0px;
display:inline-block; /**** important ****/
width:162px;
height:26px;
background-image:url(images/special_offer.png);
background-repeat:no-repeat;
}

#links_background a.special_offer:hover {
margin:0px;
width:162px;
height:26px;
background-image:url(images/special_offer_over.png);
background-repeat:no-repeat;
}

#links_background a.contact {
margin:0px;
display:inline-block; /**** important ****/
width:162px;
height:26px;
background-image:url(images/contact.png);
background-repeat:no-repeat;
}

#links_background a.contact:hover {
margin:0px;
width:162px;
height:26px;
background-image:url(images/contact_over.png);
background-repeat:no-repeat;
}




#imagefadebox {
  display: inline; 
  position: absolute;  
  list-style-type: none; 
  list-style-position: inside; 
  list-style-image: none; 
  margin-top: 0px; 
  margin-right: 0px; 
  margin-bottom: 0px; 
   margin-left: -40px;
}

#portfolio { margin: 0px; }

Open in new window

SOLUTION

RustyZ32

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

ASKER CERTIFIED SOLUTION

Montoya

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

SOLUTION

Montoya

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

SOLUTION

Gary

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Bruce Gust

ASKER

Thanks guys! I used the z-index and got it to work.

BTW: Wayne, I took your counsel from another question you helped me on and made the left container transparent so it's a sweet looking piece of website-age now!