DIV does not display in Netscape

Positions correctly, but neither its borders nor its bgcolor display.

[nate451]

Thanks in advance to the many generous people who read these forums and help trouble-shoot. I solve a good share of my code issues by finding questions/solutions on these forums.

I have a page that uses a DIV entitled "container" with this CSS:

#container {
width: 700px;
border-left: 1px solid #000;
border-right: 1px solid #000;
background-color: #CCCCFF;
position: relative;
margin-top: 80px;
margin-left: auto;
margin-right: auto;
display: block;
}

On Opera and IE, the DIV displays as would be expected. However, Netscape recognizes the DIV for positioning--expanding it to 800px, for example, expands everything within as predicted--but neither the borders nor the background-color display. I've tried fiddling with z-index values to no effect, and only added "display: block" in an attempt to fix this. Any help anyone has to offer would be highly appreciated.

[edited by: nate451 at 1:10 am (utc) on Mar. 26, 2004]

[iamlost]

The css code as given displays in Netscape 7.02 - what version are you using?

<edit>
As per the Terms of Service please remove your url. If additional code snippets would help display the problem post them as required.

And Welcome to WebmasterWorld, nate451!
</edit>

[nate451]

7.1. I've been told it also fails to display in Mozilla. Sorry about the website gaffe; I've edited my post accordingly.

The HTML is quite straight-forward, as you can imagine. Is anyone acquainted with any problem that might theoretically reveal itself this way? I'm not even sure where to look. I've searched for conflicting ids, unclosed tags, and I can't find anything.

[nate451]

The problem is a height issue. Red bordering the DIV reveals that the DIV is collapsed. Now, to find a fix. At least this gives me something more concrete for which to search.

I have:

html, body {
border: 0px;
margin: 0px;
padding: 0px;
height: 100%;
background-color: #333333;
font-family: trebuchet ms, garamond;
}

#container {
width: 700px;
border: solid red 2px;
background-color: #CCC;
position: relative;
margin-top: 80px;
margin-left: auto;
margin-right: auto;
}

#text {
padding-top: 35px;
padding-left: 20px;
padding-bottom: 20px;
width: 460px;
position: relative;
float: left;
}

#side {
position: relative;
width: 200px;
padding-top: 120px;
float: right;
}

These should be the relevant DIVs. Anyone know what is making Netscape not recognize these as filling the container DIV?

[edited by: nate451 at 1:40 am (utc) on Mar. 26, 2004]

[DrDoc]

Does the div, perhaps, contain floated elements?

[nate451]

There are also a few absolutely positioned DIVs, but I don't expect them to affect the expansion of their parent DIV.

The answer to that, DrDoc, is yes... do you, therefore, know what's wrong? (Hopeful look.)

[DrDoc]

Floated and absolutely positioned elements are taken out of the normal page flow. So, if your div therefore contains nothing but absolutely positioned elements and floated elements, the div will have zero height and width, unless explicitly specified. Since you specify the width, it does not collapse that way. But, with no specified height, it will collapse to zero height.

Workarounds? Explicitly specify a height, or ensure that at least one child element is a non-floating, non-positioned element.

For some technical reading on the subject:
[w3.org...]
[w3.org...]

[SuzyUK]

>>Workarounds

another one would be to float the container - 100% width

Floated parents will expand to contained their floated children.

This gives a small problem with centering but that it easily overcome by moving your 700px width and margin: 0 auto; to the body element instead.
Note: this only works in IE with strict doctype.

body {width: 700px; margin: 0 auto;}

#container {
float: left;
width: 100%;
border: solid red 2px;
background-color: #CCC;
position: relative;
margin-top: 80px;
}

Suzy

[nate451]

Doc, Suzy, I really appreciate your fixes. I static'd the #text div and absolutely positioned the #side div, and all is beautiful in nate451-land.

I know it was simple, I know it was silly, but you made my life better. Thanks so much!