Problem with centered 3 column layout

ThatOtherGuy

12-07-2006, 02:09 AM

I am trying to make a centered 3 column layout with a banner on the top with a width of 700px.

So there would be the banner/header, and then below it, the 3 columns.

I just have absolutely no idea what I am doing wrong.

HTML

<body>
<div id="wrapper">

<div id="banner">
banner
</div>

<div id="navi">
---------------
</div>

<div class="bodyPara">
---------------
</div>

<div id="right">
---------------
</div>

</body>

body {

text-align: center;

}

#wrapper {

border-style: solid;
border-width: thin;

margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
width: 700px;

text-align: left;

}

#banner {

border-style: solid;
border-width: thin;

width: 700px;
height: 75px;
text-align: left;

padding: 0;
}

#navi {

border-style: solid;
border-width: thin;

width: 80px;
height: auto;
text-align: left;

float: left;

padding: 0;

}

.bodyPara {

border-style: solid;
border-width: thin;

width: 500px;
height: auto;
text-align: left;

float: left;

padding: 0;

}

#right {

border-style: solid;
border-width: thin;

width: 120px;
height: auto;
text-align:left;

float: left;

padding: 0;

}

Excavator

12-07-2006, 02:35 AM

Hello ThatOtherGuy,
Have a look at http://www.nopeople.com/CSS/faux_3-column/ and see if that doesn't give you a better start.

_Aerospace_Eng_

12-07-2006, 02:40 AM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
text-align: center;
}
#wrapper {
border:1px solid #000;
width:700px;
text-align: left;
margin:auto;
}
#banner {
border:1px solid #000;
height: 75px;
}
#navi {
border:1px solid #000;
width: 80px;
float: left;
}

.bodyPara {
border:1px solid #000;
width: 494px;
float: left;
}

#right {
border:1px solid #000;
width:120px;
float:left;
}
.clear {
clear:both;
font-size:0;
line-height:0px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="banner"> banner </div>
<div id="navi"> --------------- </div>
<div class="bodyPara"> --------------- </div>
<div id="right"> --------------- </div>
<div class="clear"> </div>
</div>
</body>
</html>

You didn't understand the box model correctly. Your elements' widths were adding up to be more than 700px.