Why does the 3rd column in my layout hate me so? - Webmaster Forum

03-16-2007, 05:23 AM

Jon Mooring

Status: I'm new around here
Join date: Jan 2005
Location:
Expertise:
Software:

Posts: 14

iTrader: 0 / 0%

Jon Mooring is on a distinguished road

Why does the 3rd column in my layout hate me so?

http://clients.jonmooring.com/element_servers/

HTML:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; ch****t=iso-8859-1"/>
<title>Element Servers</title>
<script type="text/javascript" src="javascript/mootools.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="ContentContainer">
	<div id="ContentLeft">
		<div id="LeftContainer">
		</div>
	</div>
	<div id="ContentCenter">
		<div id="CenterContainer">
		</div>
	</div>
	<div id="ContentRight">
		<div id="RightContainer">
		</div>
	</div>
</div>
</body>
</html>

CSS:

Code:

body {
	margin-top: 0px;
	background-color: #000000;
	font-family: Calibri, Verdana, Helvatica, Sans-Serif;
}

#ContentContainer {
	margin: auto;
	width: 1100px;
	height: 600px;
	background-image: url('images/content_container_background.png');
}

#ContentLeft {
	float: left;
	width: 385px;
}

#ContentCenter {
	margin-left: 385px;
	width: 330px;
}

#ContentRight {
	float: right;
	width: 385px;
}

#LeftContainer {
	float: right;
	width: 305px;
	height: 340px;
	background-image: url('images/left_container_background.png');
	opacity: 0.75;
}

#CenterContainer {
	margin: auto;
	width: 310px;
	height: 270px;
	background-image: url('images/center_container_background.png');
}

#RightContainer {
	float: left;
	width: 310px;
	height: 255px;
	background-image: url('images/right_container_background.png');
	opacity: 0.75;
}

Any idea as to why my 3rd column's content is kicked to just below the limits of the content in my 2nd column? Thanks in advance for any help.