IE div position problem

Nested div doesn't show in IE - both parent and child divs are absolute.

[PMolter]

This should be simple, and from everything I've read should work as it is but I am at a loss.

There is a MASTHEADBG div behind the SITEWRAPPER div.
Within the SITEWRAPPER div is a nested LOGO div.
Also within the SITEWRAPPER are MASTHEAD, CONTENT, and FOOTER divs which are all relative, while the LOGO div is ABSOLUTE in order to overlay the logo on top of the content area. Works great in FF but the LOGO div isn't showing up in IE.

Here's the CSS:

html {
padding: 0px;
margin: 0px;
height: 100%;
width: 100%;
}
body {
background-image: url('./images/bg_main.jpg');
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
background-color: #000000;
font-size: 11px;
line-height: 14px;
margin: 0px;
padding: 0px;
padding-top: 0px;
margin-top: 15px;
 height: 100%;
width: 100%;
}
div {
position: relative;
float: left;
clear: none;
display: inline;
overflow: visible;
/*border: 1px solid red; */
}
.mastheadbg {
position: absolute;
width: 100%;
height: 220px;
background-color: #CBCBE7;
top: 15px;
left: 0px;
z-index: 1;
}
.sitewrapper {
position: absolute;
width: 960px;
left: 50%;
margin-left: -480px;
z-index: 2;
}
.mastheadwrapper {
position: relative;
width: 960px;
height: 190px;
background-image: url('./images/bg_masthead.jpg');
background-repeat: no-repeat;
background-position: top center;
}
.masthead {
position: relative;
margin-top: 150px;
margin-left: 30px;
font-size: 14px;
color: #000000;
}
.contentwrapper {
background-image: url('./images/bg_body.jpg');
background-repeat: no-repeat;
background-position: top left;
position: relative;
width: 960px;
/*top: 190px;
left: 0px; */
text-align: center;
}
.contentbg {
position: relative;
width: 960px;
background-image: url('./images/bg_body_repeat.jpg');
background-repeat: repeat-y;
background-position: 10px 255px;
text-align: left;
float: left;
clear: both;
}
.content {
width: 940px;
position: relative;
padding: 0px 30px 20px 30px;
text-align: left;
}
.footerwrapper {
background-image: url('./images/bg_footer.jpg');
background-repeat: no-repeat;
background-position: top center;
position: relative;
width: 960px;
height: 80px;
float: left;
clear: both;
}
.footer {
width: 940px;
height: 80px;
margin-left: 10px;
text-align: center;
line-height: 80px;
font-size: 14px;
color: #000000;
}
.footspacer {
position: relative;
width: 960px;
height: 15px;
float: left;
clear: none;
}
.logo {
position: absolute;
z-index: 99;
width: 190px;
height: 190px;
top: 20px;
right: 35px; 
}

and here's the html for the layout:

<div class="mastheadbg"></div>
<div class="sitewrapper">
 <div class="mastheadwrapper">
 <div class="masthead">home ¦ contact ¦ about</div>
 </div>
 <div class="contentwrapper">
 <div class="contentbg">
 <div class="content">
Main body content area.
 </div>
 </div>
 </div>
 <div class="footerwrapper">
 <div class="footer">Footer content area.</div>
 </div>
 <div class="footspacer"></div>
 <div id="logo"><img src="/images/logo.jpg"></div>
</div>

Any suggestions on resolving this are greatly appreciated.

[swa66]

Welcome to WebmasterWorld!

To start with, you're doing some _really_ strange things:

div {
position: relative;
float: left;
display: inline;
}

I deleted a few properties, but those will make a div act really strange by default.

Similarly, your html is almost an example of what's called divitis and clasitis (overuse of divs and classes respectively.

I'm not saying this to make you feel bad, not at all, but you set things in a way few out here would do and that's causing getting help to be rather difficult.

position ... the default for any element is position:static (not relative).
Position relative does two things:
- allows the element to be nudged in any direction using top,bottom,left and/or right (without reflowing the content, so an the original spot is left reserved for it)
- gives the element "position", allows it to be used as a reference for positioning children having absolute positioning

In addition to this it also causes side effects in legacy IE versions (sometimes wanted, sometimes not ...)

[PMolter]

Thanks for the clarity. I've learned through osmosis for the most part which explains why things didn't work the way I thought they should.

So having a site wrapper div positioned absolute is correct? However, the divs that make up the site layout and content should or should not be nested and relative? Not sure if I follow your 2nd point on positioning (about a reference for children positioned absolute).

One school of thought I had been exposed to said to set everything absolute - but I couldn't find a way to make the site expand vertically with content. Once I started using floated divs things seemed to work properly. I guess since it wasn't broke (until recently) I didn't look to fix it.

[swa66]

One can use absolute positioning for everything, but it's harder to deal with content that's larger (or viewports that are smaller) than expected.
One can use floating all over, but it's not always the easiest solution either.

The best solution is to use the mix as you need it. And not forget the normal flow as a basis.

Imagine you a wrapper to be e.g. centered (you can do that using margins).
Now to position a footer using absolute positioning e.g. near it's bottom you might want to use absolute positioning, but you need a reference for the absolute positioning not to be the viewport, but the wrapper (which is going to be smaller, centered and potentially longer than the window is tall).
To switch the reference used by the absolute positioning of the viewport (which is the default) to a parent (no need to be a direct parent), you can have that parent "gain position". One way of doing that is by giving it position:relative.

In most cases I'd not use absolute positioning on a wrapper. I'd use relative if I need to have it have position (not by default).

[PMolter]

Ok...so I've now recoded the html and css from your suggestions (thanks!) and it seems to work with 1 exception (2 if you count the hacks I'll need to work through with IE). If I float the 2 columns of content, the contentwrapper div loses height and doesn't display the full background image. I'm not having any luck finding how that should be coded.

The html:

<div class="mastheadbg"></div>
<div class="sitewrapper">
<div class="mastheadwrapper">Main Navigation Links</div>
 <div class="contentwrapper">
 <div class="leftbody subheadline">Left Column Copy</div>
 <div class="rightbody pinkbgdrk padding subheadline">Right Column Headline</div>
 <div class="rightbody pinkbg padding">Right Column Copy</div>
 </div>
 <div class="footerwrapper">Footer Content</div>
<div class="footerspacer"></div>

and the css:

html, body {
background-image: url('./images/layout1_bg_main.jpg');
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
background-color: #000000;
font-size: 11px;
line-height: 14px;
text-align:center;
margin: 0px;
padding: 0px;
margin-top: 15px;
 height: 100%;
width: 100%;
}
div {
text-align: left;
}
.mastheadbg {
position: absolute;
width: 100%;
height: 220px;
background-color: #CBCBE7;
top: 15px;
left: 0px;
z-index: 0;
}
.sitewrapper {
position: relative;
width: 960px;
margin: 0 auto;
background-image: url('./images/layout1_bg_body_repeat.jpg');
background-position: center top;
background-repeat: repeat-y;
border: 1px solid red;
}
.mastheadwrapper {
width: 930px;
height: 40px;
background-image: url('./images/layout1_bg_masthead.jpg');
background-repeat: no-repeat;
background-position: top center;
padding: 150px 0 0 30px;
font-size: 14px;
color: #000000;
border: 1px solid green;
}
.contentwrapper {
background-image: url('./images/layout1_bg_body.jpg');
background-repeat: no-repeat;
background-position: top left;
width: 90 0px;
padding: 0px 30px 20px 30px;
border: 1px solid blue;
}
.footerwrapper {
background-image: url('./images/layout1_bg_footer.jpg');
background-repeat: no-repeat;
background-position: top center;
width: 960px;
height: 80px;
clear: both;
font-size: 14px;
line-height: 80px;
text-align: center;
border: 1px solid yellow;
}
.footerspacer {
position: relative;
width: 960px;
height: 15px;
margin: 0 auto;
clear: both;
}
.leftbody {
width: 480px;
}
.padding {
padding: 10px;
}
.rightbody {
width: 350px;
}

[PMolter]

Short of a better solution, I added height to the contentwrapper div so the background image displays fully with the child divs being floated. Should I have done this another way?