Need Help with conjoining two DIV’s

[pghtech]

I have a problem with my layout that I just can’t seem to wrap my mind around.

I have included MY html and CSS – the problem is:

I have a Container DIV that houses all my other DIV’s – but the Container DIV is inside a Wrapper Div. I did this because it allowed the background of the Wrapper to align with the background in the DIV’s that are in the container, AND when you resize the window, the Wrapper div background moves with the Container DIV.

The problem is that I have a Banner DIV that is inside the Wrapper div and outside the Container Div. It is 100% width of the Wrapper and the wrapper width is 100% of the body. This banner DIV background is only 77px high and has a background that is visually an extension of part of the Header background. What occurs is when you re-size the window (side to side) the banner DIV stays stationary and the container div moves and stays centered on the screen. This causes the Header DIV background and the banner DIV background to become unaligned.

The catch that I can’t quite figure out is that the wrapper background nicely moves with the container, so the graphics stay align. But not the case with the banner DIV.

To try and make this easier, I have included the CSS and HTML as well as a link to a see exactly what I am talking about. The blue-ish/purple stripe that goes completely from left to right is the banner div that I want to move with the container DIV JUST LIKE the wrapper DIV background and stay aligned.

http://www.daisyblossoms.com/index2.html

Code:

• Home
• Arrangements
• Candle Rings
• Wreaths
• Contact Us

CSS

Code:

body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
color: #F0EFDB;
z-index: 1;
width: 100%;
position: static;
}

#wrapper {
background:#F0EFDB url(Images/Background/wrapper_bg.gif) repeat-y center top;
width: 100%;
position: static;
z-index: 2;
margin: 0 auto;
}

#container {
width: 792px;
margin: 0 auto;
text-align: left;
background: transparent;
position: relative;
z-index: 5;
}

#header {
padding: 0;
width: 100%;
height: 474px;
background-image:url(Images/Header/header_bg.jpg);
background-repeat: no-repeat;
z-index: 5;
position: relative;

}

/* —BEGIN —- Navigation CSS */
#navigation {
height: 61px;
background: transparent url(Images/Menu/mmid.png);
margin: 0;
border: 0;
top: 406px;
left: 200px;
z-index: 6;
position: relative;
width: 100%;
}

.menu {
margin: 0;
padding: 0;
}

.menu ul {
margin: 0;
padding: 0;
list-style: none;
float: left;
}

ul.menu li {
display: inline;
float: left;
margin: 0;
padding: 0;
}

ul.menu a {
background:transparent url(Images/Menu/mright.png) no-repeat right top;
margin: 0;
padding: 0;
text-decoration: none;
border: 0;
display: block;
float: left;
}

ul.menu a span {
display:block;
background:url(Images/Menu/mleft.png) no-repeat left top;
padding:0 12px 0 14px;
font-family:”Times New Roman”, Times, serif;
font-size: 20px;
color:#FFFFFF;
font-weight:lighter;
line-height:61px;
}

ul.menu a:hover,ul.menu li.active_item a {
background-position: right bottom;

}

ul.menu a:hover span,ul.menu li.active_item a span {
color: #AA2A70;
font-style: normal;
text-decoration: none;
background-position: left bottom;
}

#banner {
background:transparent url(Images/banner/banner_bg.gif) repeat-x;
z-index: 4;
width: 100%;
position: absolute;
top: 397px;
height: 77px;
}

/* —END —- Navigation CSS */

#h1 {
margin: 0;
}

#mainContent {
width: 100%;
background:#F0EFDB url(Images/MainContent/page_shadow.jpg) repeat-y;
height: 400px;
z-index: 5;
position: relative;
}

#footer {
padding: 0;
background:#F0EFDB url(Images/Footer/footer_bg.jpg) no-repeat;
width: 100%;
height: 33px;
position: relative;
z-index: 5;
}

#footer p {
margin: 0;
padding: 10px 0;
}

[pghtech]

Well after allot of time trying to figure this out, and knowing the key has to lie with the fact that the wrapper background would move with the container when the window was resized – I finally figured it out.

The requirement was that the Banner DIV background had to have a position of Center for X.

[Author]

Posts