3 column layout help? right content overlapping the center?

[frantik]

I am a newbie therefore i am baffled why my right content is overlapping the center content. In most computers ive looked at, it was not overlapping at all but some computers ive looked at, the right content is overlapping the center content by half. What is going on? help please?

heres the code im using:

#rightcontent {
hspace:20px;
position:absolute;
right:1%;
top:125px;
width:185px;
background:#454545;
border:5px solid #1C1C1C;
color:#ffffff;
text-align:left;
padding:2px;
font-size:12px;
font-family:Arial;
}

#leftcontent {
position: absolute;
left:10px;
top:125px;
width:185px;
background:#454545;
border:5px solid #1C1C1C;
color:#ffffff;
font-size:12px;
font-family: Arial;
letter-spacing: 1px;
padding:2px;
}

#centercontent {
background:#ffffff;
margin-left: 199px;
margin-right:199px;
border:5px solid #1C1C1C;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 201px;
margin-right:201px;
word-spacing: 1pt;
font-family:Arial;
font-size:12px;
white-space:normal;
}

html>body #centercontent {
margin-top:0px;
margin-left: 201px;
margin-right:201px;
}

If anyone know what i can do to prevent the right content from overlapping to the center content that'd be great. thanks.....

[boogyman]

your code itself doesn not look wrong, but there are a couple of things that could cause this, the biggest and most prominent is that size of the browser. You are seeing overlaps because your right and left contents have a fixed width, and the the center content is really what is changing to make it all fluid.
To fix that you would use a declaration to set a minimum width of the body itself.


body {
min-width: 650px;
}


I set it to 650 because each of your side contents are 200 and your main content is the middle, so it should always remain larger then the "sidebars".

This will ensure that you have ample spacing to get everything in there that you want but it would still allow the center content to expand as needed on wider browser widths.

[frantik]

Hey pissa,

I tried your suggestion and it didn't work......I actually have tried and added that same code before to no avail.....the right content still overlaps the center. I was thinking of floating the right content but that's a whole other story.....If have anymore suggestions, please.....very much appreciate you helping me out :)

I'll probably just have to redo my whole layout to a 3 column layout, all fixed, to avoid overlapping.....thanks a mil pissa!~