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,
EugeneTry this... div#maincontainer {
position:relative;
}Thanks BonRouge but that did not work. Any other suggestions?
EugeneYou 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>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
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,
EugeneTry this... div#maincontainer {
position:relative;
}Thanks BonRouge but that did not work. Any other suggestions?
EugeneYou 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>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