davm22
11-11-2010, 11:55 PM
I am just putting together a quick test to see how I can do a three column website.
The problem I am having is that the middle column is appearing slightly lower than the column on the right and left. This only happened after I put a small border around all three columns. Heres a picture:
http://img190.imageshack.us/img190/6931/column1.jpg
The centre column is lower. I have tried quite a lot of different things and it seems like something fairly simple which I am overlooking.
Here is my basic coding:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Three Column Website</title>
<link href="css/mycssfile.css" rel="stylesheet" type="text/css">
</head>
<body>
<meta name="Keywords" content="Three, Column, Website">
<meta name="Description" content="Three Column Website.">
<br>
<div id="mainleft">
<h2>LEFT</h2>
<p>This is the column on the LEFT</p>
<img src="photos/monkey1.jpg" alt="" name="monkey" id="monkeyleft" width="250" height="167">
</ul>
</div>
<div id="mainright">
<h2>RIGHT</h2>
<p>This is the column on the RIGHT</p>
<img src="photos/monkey1.jpg" alt="" name="monkey" id="monkeyright" width="250" height="167">
</ul>
</div>
</div>
</ul>
</div>
<div id="maincentre">
<h2>CENTRE</h2>
<p>This is the column in the CENTRE</p>
<center><img src="photos/monkey1.jpg" alt="" name="monkey" width="250" height="167"></center>
</ul>
</div>
</body>
</html>
and here is my CSS file.
body {background-color: #000000; }
#mainleft {
float: left;
padding: 0% 2% 0% 0%;
width: 24%;
border: 1px solid #ffffff;
}
#maincentre {
margin-left: 27%;
margin-right: 27%;
border: 1px solid #ffffff;
}
#mainright {
float: right;
padding: 0% 0% 0% 2%;
width: 24%;
border: 1px solid #ffffff;
}
#monkeyright{
margin: 0 0 10px 10px;
float: right;
clear: right;
}
#monkeyleft{
margin: 0 0 10px 10px;
float: left;
clear: left;
}
The problem I am having is that the middle column is appearing slightly lower than the column on the right and left. This only happened after I put a small border around all three columns. Heres a picture:
http://img190.imageshack.us/img190/6931/column1.jpg
The centre column is lower. I have tried quite a lot of different things and it seems like something fairly simple which I am overlooking.
Here is my basic coding:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Three Column Website</title>
<link href="css/mycssfile.css" rel="stylesheet" type="text/css">
</head>
<body>
<meta name="Keywords" content="Three, Column, Website">
<meta name="Description" content="Three Column Website.">
<br>
<div id="mainleft">
<h2>LEFT</h2>
<p>This is the column on the LEFT</p>
<img src="photos/monkey1.jpg" alt="" name="monkey" id="monkeyleft" width="250" height="167">
</ul>
</div>
<div id="mainright">
<h2>RIGHT</h2>
<p>This is the column on the RIGHT</p>
<img src="photos/monkey1.jpg" alt="" name="monkey" id="monkeyright" width="250" height="167">
</ul>
</div>
</div>
</ul>
</div>
<div id="maincentre">
<h2>CENTRE</h2>
<p>This is the column in the CENTRE</p>
<center><img src="photos/monkey1.jpg" alt="" name="monkey" width="250" height="167"></center>
</ul>
</div>
</body>
</html>
and here is my CSS file.
body {background-color: #000000; }
#mainleft {
float: left;
padding: 0% 2% 0% 0%;
width: 24%;
border: 1px solid #ffffff;
}
#maincentre {
margin-left: 27%;
margin-right: 27%;
border: 1px solid #ffffff;
}
#mainright {
float: right;
padding: 0% 0% 0% 2%;
width: 24%;
border: 1px solid #ffffff;
}
#monkeyright{
margin: 0 0 10px 10px;
float: right;
clear: right;
}
#monkeyleft{
margin: 0 0 10px 10px;
float: left;
clear: left;
}