3 column layout help? overlapping?

[frantik]

Im a newbie and i am wondering why the right content of this layout is overlapping the center content. Am i missing something to keep the right content from overlapping the center content? help?

this is the site where i got the layout:

http://www.glish.com/css/7.asp

Here is 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;
}

Any help is appreciated please, thanks!

[JShor]

Hi, since this is CSS, you are probably using DIVs. seperate them with table columns, with no padding spacing, or border. The table should be 100%, and each box content should be in a seperate cell. Hope this helps!

-Josh

[boogyman]

seperate them with table columns The table should be 100%, and each box content should be in a seperate cell.

LMAO Tables are not the way to go. This is easily fixed with just 1 more css line

Your problem is that your browser width is not wide enuf to support all of the content. Your sidebars have a fixed width, while your center content (main) content is the one that expands and contracts... all you need to do is make a minimum width on the body and if a browser is not that wide, a horizontal scroll will be inserted...



body {min-width: 650px}


While horizontal scrolls are not the best thought practice, in a situation like this is is alot better than having it overlap.. I set it to 650, because your sidebars are each 200 and you want the center area...eg the **** they came to page for... at least as wide

just insert that into your css and you will be golden