Lay out verspringt (css)

Door Onbekende gebruiker op 02-01-2010 16:31

2.815 views

Hallo mensen,

Ik heb zojuist een (basis) lay-out gemaakt.
maar op een of andere manier verspringt deze telkens. Ik neem aan dat ik wat verkeerd doe in mijn css maar ik kan niet echt zien wat het probleem is.

hier mijn css:


/* Containers */

#container {
	width: 100%;
	margin: auto;
}

#cont_logo {
	width: 100%;
	margin: auto;
}

#cont_menu {
	width: 147px;
	float: left;
}

#cont_content {
	width: 76%;
	margin: auto;
}

#cont_right {
	width: 147px;
	float: right;
}

#cont_footer {
	width: 100%;
	margin: auto;
}



/* Logo */

#logo {
	text-align: center;
	padding-top: 10px;
}

#logo h1 a {
	font-size: 30px;
	color: #A80000;
	text-decoration: none;
}

#logo h1 a:visited {
	font-size: 30px;
	color: #A80000;
	text-decoration: none;
}

#logo h1 a:hover {
	font-size: 30px;
	color: #A80000;
	text-decoration: none;
}

#logo h2 {
	font-size: 15px;
}



/* Menu */

#menu {
	text-align: left;
	font: bold 14px arial, helvetica, sans-serif;
	border-width: 1px;
	border-style: solid;
	border-color: #000;
	margin-left: 5px;
}

#menu ul {
	list-style: none;
}

#menu li {
	background-color: #A80000;
}

#menu li a {
	color: #fff;
	text-decoration: none;
	display: block;
	text-transform: uppercase;
	padding-left: 5px;
	padding-top: 2px;
	padding-bottom: 2px;
}

#menu li a:visited {
	color: #fff;
	text-decoration: none;

}

#menu li a:hover {
	color: #000;
	text-decoration: none;
	background-color: #D00000;
}



/* Content */

#content {
	text-align: left;
	font-size: 12px;
	padding-left: 60px;
}

#content h1 {
	color: #A80000;
	font-size: 25px;
	text-align: left;
	border-bottom: 2px solid #A80000;
}

#content h2 {
	font-size: 16px;
	color: #000000;
}

#content h3 {
	font-size: 14px;
	color: #000000;
}

#content p {
	padding-left: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
}



/* Right */

#right {
	font: bold 14px arial, helvetica, sans-serif;
	color: #FFFFFF;
	border-width: 1px;
	border-color: #000;
	border-style: solid;
	margin-right: 5px;
	padding-right: 2px;
	padding-top: 2px;
	padding-bottom: 2px;
	background-color: #A80000;
	text-align: center;
}

#right a {
	color: #ffffff;
	text-decoration: none;
}

#right a:visited {
	color: #ffffff;
	text-decoration: none;
}

#right a:hover {
	color: #000000;
	text-decoration: none;
}

#right h2 {
	font: bold 11px arial, helvetica, sans-serif;
	color: #FFFFFF;
	text-align: center;
}

#right h3 {
	font: bold 12px arial, helvetica, sans-serif;
	color: #FFFFFF;
	text-align: center;
}



/* Footer */

#footer {
	text-align: center;
}

#footer a {
	color: #B80000;
	font-size: 13px;
	font-style: italic;
	text-decoration: none;
}

#footer a:visited {
	color: #B80000;
	font-size: 13px;
	font-style: italic;
	text-decoration: none;
}

#footer a:hover {
	color: #680000;
	font-size: 13px;
	font-style: italic;
	text-decoration: underline;
}

hier mijn html


<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
	<head>
			<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">	
	
		<title> | Home</title>

			<link href="reset.css" rel="stylesheet" type="text/css">
			<link href="style.css" rel="stylesheet" type="text/css">
	</head>

	<body>
		<div id="container">

			<div id="cont_logo">
				<div id="logo">
					<?php
						include("logo.php");
					?>
				</div>
			</div>		
			

			<div id="cont_menu">
				<div id="menu">
					<?php
						include("menu.php");
					?>
				</div>
			</div>


			<div id="cont_content">
				<div id="content">
					<?php
						include("home.php");
					?>
				</div>
			</div>


			<div id="cont_right">
				<div id="right">
					<?php
						include("right.php");
					?>					
				</div>
			</div>


			<div id="cont_footer">
				<div id="footer">
					<?php
						include("footer.php");
					?>					
				</div>
			</div>

		</div>
	</body>
</html>

Zoals je kunt zien include ik alles dit omdat ik WEL verschillende pagina's wil (en dus niet alleen mijn content wil veranderen) maar geen zin heb om steeds mijn menu oid te moeten kopiëren.

Als mensen meer code nodig hebben (bijv die van mijn footer oid) dan hoor ik dat wel

hier een plaatje wat goed de indicatie geeft wat er fout is.
wegens privacy heb ik bepaalde stukken zwart moeten maken excuses hiervoor.
http://img697.imageshack.us/img697/7369/screenshotkd.jpg
Zoals je kunt zien springt mijn "right" naar beneden zodra er meer tekst komt in mijn "content" en schiet mijn footer daardoor naar links :S
best irritant.

Groeten,
White