3 column css question? [Archive]

febrocks

08-18-2005, 11:18 AM

Hello everyone,
I'm trying to make a 3 column format but the columns are outside the maincontainer. As you can see the maincontain has a border and the columns are outside. I'm gone through some examples but all are differen and I just can't figure this out. Any suggestion?

code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>3 column float</title>

<style type="text/css">
body {
border: 0;
margin: 0;
padding: 0;
}
div#maincontainer { /* main page format*/

padding: 0;
border: 2px solid red;
width: 760px;

}
div#leftcolumn, div#maincolumn, div#rightcolumn {
margin-top: 4px;
padding: 0;
float: left;

}
div#header {
margin: 0;
padding: 0;
background-color: yellow;
padding: 10px;
}
div#leftcolumn {
display: block;
width: 160px;
background-color: #c6e7de;
}
div#rightcolumn {

width: 140px;
margin-left: 4px;
background-color: #c6e7de;
}
div#maincolumn {
width: 400px;
padding: 1em;
margin-left: 4px;
background-color: #c6e7de;
}

</style>
</head>
<body>
<div id="maincontainer">
<div id="header">
<h1>This is the header</h1>
</div>
<div id="leftcolumn"
<ul>
<li>auto</li>
<li>boat</li>
<li>RV</li>
<li>atv</li>
<li>traitor trailer</li>
</ul>
</div>
<div id="maincolumn">
<p>This is the main content for this page. Repeat.... This is the main content for this page. Repeat....This is the main content for this page. Repeat....This is the main content for this page. Repeat....This is the main content for this page. Repeat....This is the main content for this page. Repeat....This is the main content for this page. Repeat....This is the main content for this page. Repeat....This is the main content for this page. Repeat....This is the main content for this page. Repeat....</p>
</div>
<div id="rightcolumn">
<p>This is the right column</p>
</div>
</div>
</body>
</html>

Thanks,
Eugene

BonRouge

08-18-2005, 12:34 PM

Try this... div#maincontainer {
position:relative;
}

febrocks

08-18-2005, 01:05 PM

Thanks BonRouge but that did not work. Any other suggestions?

Eugene

Scleppel

08-18-2005, 01:13 PM

You have to clear your floated columns to make the border go around the outside.
<p>This is the right column</p>
</div>
<div style="clear: both; height:4px;"></div>
</div>
</body>
</html>

febrocks

08-18-2005, 01:54 PM

Yes Scleppel.. I did try clear: both; and that does not work. I'm starting to think that my system is flaking out. Because both IE and FFox does the same thing, that does not happen very often. Nothing works. I'm going to do some clean up and up keep on this thing then see what happens.

Thanks for all the help.

Eugene