Div inside Div problem

Div inside Div, parent div, relationship, relative, absolute

[Ertai]

I'm having a problem with a child div overflowing it's parent div.

Goto:
<smip>

The parent div has a background of red, child is dark-gray. In NN7.0 the child divs are displaying incorrectly.

The CSS can be found here:
<snip>

or alternately:

/* All the content boxes belong to the content class. */ 
.content { 
position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */ 
width:auto; 
min-width:120px; 
margin:0px 210px 20px 170px; 
border-style:solid; 
border-color:#666666; 
border-width:1px; 
background-color:#2A2A2A; 
padding:10px; 
z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */ 
} 
.menuAlpha { 
position:relative; 
width:150px; 
border-style:solid; 
border-color:#666666; 
border-width:1px; 
background-color:#2A2A2A; 
padding:10px; 
margin-bottom:20px; 
z-index:2; 
/* This value affects IE */ 
voice-family: "\"}\""; 
voice-family:inherit; 
width:150px; 
} 
/* This value affects Netscape */ 
body>.menuAlpha {width:128px;} 
.menuBeta { 
position:relative; 
width:190px; 
border-style:solid; 
border-color:#666666; 
border-width:1px; 
background-color:#2A2A2A; 
padding:10px; 
margin-bottom:20px; 
z-index:1; 
/* This value affects IE */ 
voice-family: "\"}\""; 
voice-family:inherit; 
width:190px; 
} 
/* This value affects Netscape */ 
body>.menuBeta {width:168px;} 
#navAlpha { 
position:absolute; 
width:150px; 
top:193px; 
left:20px; 
border-style:none; 
border-width:0px; 
background-color:#FF0000; 
padding:0px; 
z-index:2; 
/* This value affects IE */ 
voice-family: "\"}\""; 
voice-family:inherit; 
width:150px; 
} 
/* This value affects Netscape */ 
body>#navAlpha {width:128px; top:188px;} 
#navBeta { 
position:absolute; 
width:190px; 
top:193px; 
right:20px; 
border-style:none; 
border-width:0px; 
background-color:#FF0000; 
padding:0px; 
z-index:1; 
/* This value affects IE */ 
voice-family: "\"}\""; 
voice-family:inherit; 
width:190px; 
} 
/* This value affects Netscape */ 
body>#navBeta {width:168px; top:188px;} 
#Header { 
margin:-14px 0px 21px 0px; 
padding:17px 0px 0px 20px; 
height:8px; 
border-style:solid; 
border-color:#666666; 
border-width:1px; 
line-height:6px; 
background-color:#2A2A2A; 
z-index:5; 
 } 
#Title { 
position:relative; 
margin:60px 0px 0px 0px; 
padding:0px 0px 0px 0px; 
height:50px; 
border-width:0px; 
z-index:4; 
 } 

The two divs that are overflowing their parents are the .menuAlpha and .menuBeta class divs

Any help would be great, I've tried I alot of things, just not the right one ;-)

[edited by: Nick_W at 6:15 am (utc) on Nov. 20, 2003]
[edit reason] no personal urls please / thanks! [/edit]

[SuzyUK]

First Welcome to CSS [webmasterworld.com]

How could I refuse such a plea for help, but YUK! it's the Hacks! ;)

Disclaimer: I don't do hacks, so this is the best explanation I could come up with...

plea: Use Sparingly! ~ Understanding the Box Model is a major part of CSS so at least the "Tan Hack" makes you aware of that. There are simplified BMH's [css-discuss.incutio.com] if you prefer to use them

---

First let's take (a summarised) bit of your code:

.menuAlpha {
width:150px;
padding:10px;
border: 1px solid #666;

/* This value affects IE */
voice-family: "\"}\"";
voice-family:inherit;
width:150px;
}

/* This value affects Netscape */
body>.menuAlpha {width:128px;}

I think there is a flaw in your understanding here..

The "box" needs to be 150px wide.
IE (quirky) will make the box 150px wide no matter what paddings/margins/borders there are. So 150px is The IE width

Standards Compliant browsers will add padding/margins borders on to any explicit width so the width you need to set for most browsers is 128px.

1 + 10 + 128 + 10 + 1 = 150px

You already have this correct in the blue part of the BMH, but it's the red part that is wrong, that is not the value that affects IE, that is the value that affects browsers which don't choke on the hack (most everything except IE actually, which is why is was so widely used I presume).

For browsers that don't choke they will use the second(red) value for width as it overrides the first one as per the Cascade rules. The blue part of the BMH used to be called the "be nice to Opera Rule" because previous Opera's used to choke too, but did understand the Child Selector Rule (blue part) but now I think it could be called a be nice to Standards Compliant Browser Rule (i.e. any browser that understands Child Selectors).

So take that and look over the rest of your <nav> and <menu> rules and that should fix it..

#navBeta {
width:190px;
border-style:none;
border-width:0px;
background-color:#FF0000;
padding:0px;

voice-family: "\"}\"";
voice-family:inherit;
width:190px;
}

body>#navBeta {width:168px;}

Hint... is there any need for different widths (or the BMH) here ;)

Note: Anyone else feel free to correct me if this info is wrong, cause I wouldn't want to be giving incorrect information to Ertai..

Suzy

[Ertai]

Ok, thanks for the help Suzy =). I'm at work now but when I get home I will try to fix it.

The layout I got was origionally a combination of the Blue Robot's layout resevoir(http*//www.bluerobot.com/web/layouts/) and the Noodle Incedent Box Lessons (http*//www.thenoodleincident.com/tutorials/box_lesson/boxes.html)

I figured that both were outdated, but I couldn't find any up to date information on CSS layouts. (Might anyone know any?). Edit: Never mind, I found a great resource for layouts and other information on CSS (http*//www.tanfa.co.uk/css/)

Alright, well I'm just gonna try to get away from the hack ertirely, in fact the only reason I was using it is because I was getting a different display between IE6 and NN7. But from what I have read in the link you provided, the hack should only need to be used for IE5.x right? So why would I be getting to different sized DIV's from IE6 and NN7?

[TGecho]

Are you using a doctype [msdn.microsoft.com]?

[Ertai]

Yeah, doctype is 4.01 transitional.

[TGecho]

According to MSDN, if you use a transitional doctype without the full url, IE6 will switch to quirks mode. This will among other things cause it to render the box model incorrectly. Adding the url or changing to a strict doctype should fix a lot of problems in IE. As for v5.x, that's a slightly different beast.

I've found that the best overall solution is to try and avoid applying padding/margins to anything that I've also set a width/height on unless exact size doesn't matter. While this can be difficult at times, it's usually doable.

[Ertai]

Great, I got it to work!

In a combination of taking out the hacks, heights, and some of the paddings and margins everything works right. I think the key to successful CSS is simplicity. Like Suzy does take your code, and slash it down to only the necessities to find the problem.

I have also learned an extreme ammount of knowledge from simply visiting Suzy's website and the articles, links she has made available. I encourage any web designer having trouble with CSS to check her website out.

Here's the end code that displays correctly in IE6, NN7, and Mozilla 1.5:

/* All the content boxes belong to the content class. */ 
.content { 
position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */ 
width:auto; 
min-width:120px; 
margin:0px 210px 20px 170px; 
border-style:solid; 
border-color:#666666; 
border-width:1px; 
background-color:#2A2A2A; 
padding:10px; 
z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */ 
} 
.menuAlpha { 
position:relative; 
border-style:solid; 
border-color:#666666; 
border-width:1px; 
background-color:#2A2A2A; 
padding:10px; 
margin-bottom:20px; 
z-index:2; 
} 
.menuBeta { 
position:relative; 
border-style:solid; 
border-color:#666666; 
border-width:1px; 
background-color:#2A2A2A; 
padding:10px; 
margin-bottom:20px; 
z-index:1; 
} 
#navAlpha { 
position:absolute; 
width:150px; 
top:200px; 
left:20px; 
background-color:#FF0000; 
z-index:2; 
} 
#navBeta { 
position:absolute; 
width:190px; 
top:200px; 
right:20px; 
background-color:#FF0000; 
z-index:1; 
} 
#Header { 
margin:0px 0px 35px 0px; 
padding:20px 0px 0px 20px; 
border-style:solid; 
border-color:#666666; 
border-width:1px; 
background-color:#2A2A2A; 
z-index:5; 
  } 
#Title { 
position:relative; 
margin:64px 0px -15px 0px; 
padding:0px 0px 0px 0px; 
border-width:0px; 
z-index:4; 
  }