How to stop element content boxes overlapping

[IanTurner]

I have a layout with an inline div with wide margins and two menu boxes one in the left margin and one in the right margin of the inline div.

The content of the central (inline) dive won't overlap the left margin box when the browser is shrunk, but the margin of the right menu box overlaps the content of the central div, is there any way I can stop the content areas overlapping?

[SuzyUK]

Ok Ian you're being cryptic again ;)

a bit more info is required...

I'm presuming not an "inline div", but a block level div instead so it's got left and right margins set (are these margins pixels or %)..

then your left and right menu divs are positioned how? absolutely? and are their widths in pixels (designed to fit inside the main div's margins)

Any AP divs shouldn't have margins on them they should be sized and positioned to fit inside the space created for them.

A stripped code snippet will give more clue..

I've got a test running from what I can visualise but I can't recreate the "overlap" you mention

Suzy

[IanTurner]

<div id="banner">
</div>
<div id="centrecontent">
</div>
<div id="leftcontent">
</div>
<div id="rightcontent">
</div>

#leftcontent {
background-color:#ffffff;
position: absolute;
left:0px;
top:96px;
width:142px;
}

#rightcontent {
position: absolute;
right:0px;
top:96px;
width:142px;
}

#centercontent {
background-color:#ffffff;
color: #000000;
margin-left: 160px;
margin-right:160px;
margin-top: 8px;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 160px;
margin-right:160px;
}

The left and right divs are absolutely positioned to fit in the margins of the centercontent div, however if the page gets shrunk the rightcontent div overlaps the centercontent div.

[SuzyUK]

that code's fine Ian? it shouldn't overlap in theory

However is there something in your center column (i.e. an image or a table or a fixed width div?) that would force the center to not to shrink below a certain width? so forcing it to reduce the right margin and under the right column..

It's the only thing I can think of..

Suzy

[iamlost]

This may be late and the problem may be resolved but my two cents worth as I liked your column design (and agree with SuzyUK that code looks fine) so I ran it and saw a couple of things:

1. As SuzyUK said if you have a fixed size image in the centercolumn the rightcolumn will eventually override it as the page shrinks (right and left being absolute). If it is feasible to size image by % then it will shrink evenly with the rest of the centercolumn.

2. At some point the shrinking width/expanding height of the centercolumn is one word wide. At that point centercolumn can no longer shrink and rightcolumn will overwrite it.

3. If none of the above is the problem more detail would be helpful.

[aevea]

I don't know if this is just a typo, but you've got british "centre" in the id and american "center" in the css. If it's like that in the actual page there will definitely be overlap as the html won't pick-up the rule. Also I again, see here [webmasterworld.com], fail to understand using the voice-family hack to specify the same values for ie.

Adam