...

View Full Version : Resolved Simple Column Issue



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

marilynn.fowler
11-12-2010, 12:15 AM
Have you tried floating all three to the left and only putting right-margins on the left and center?

You might also consider
* { margin:0 } to universally zero out your margins and adding them in one by one to isolate the problem.

marilynn.fowler
11-12-2010, 12:17 AM
I also notice that you explicitly set the top margins to 0 for the left and right monkey, but did not set the top margin for the center. That's probably your culprit. Top margins poke out of the top of divs. Put a 1px top padding on your divs and that should take care of it.

davm22
11-12-2010, 12:30 AM
I also notice that you explicitly set the top margins to 0 for the left and right monkey, but did not set the top margin for the center. That's probably your culprit. Top margins poke out of the top of divs. Put a 1px top padding on your divs and that should take care of it.

Thanks for that. I have now added the margin in for the centre monkey but I think the problem lies in the #maincentre tag. I have tried adding 1px top padding in too but it doesnt seem to work

Excavator
11-12-2010, 12:38 AM
Hello davm22,
Have you tried validating yet? There are a couple mistakes there the validator will find that may help you.
See the links about validation in my sig below.

davm22
11-12-2010, 12:42 AM
Hello davm22,
Have you tried validating yet? There are a couple mistakes there the validator will find that may help you.
See the links about validation in my sig below.

Done and all working fine! Thanks

It was as simple as leaving a </ul> in after a copy and paste when they werent needed

Excavator
11-12-2010, 12:44 AM
If I add some comments that identifiy div closing tags and do some indention... you can easily see the extra markup that does not belong. Look at these bits highlighted in red -
<body>
<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>
<!--end mainleft--></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>
<!--end mainright--></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>
<!--end maincentre--></div>
</body>

Excavator
11-12-2010, 12:54 AM
Your use of the center tag and Transitional DocType may not be doing you any favors later on down the road.
Check out this simple 3 column layout (http://nopeople.com/CSS/simple3column/index.html).

davm22
11-12-2010, 07:14 AM
Thanks again. Think I will use comments and I'll take a look at that link, thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum