css layout help

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
mickd
Forum Contributor
Posts: 397
Joined: Tue Jun 21, 2005 9:05 am
Location: Australia

css layout help

Post by mickd »

i was just mucking around with layouts using css and div/span and i cant seem to figure out why ive got 2 errors.

error1. when i add padding into the css for left_navigation and contents ids, it breaks the layout and makes contents go on a new line.

error2. in the footer id, the css top: 1px; doesnt seem to be working?

any help appriciated, code below (using PHP code tags for the colours):

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style type="text/css">
body {
	background-color: #FFFFFF;
	margin: 0px 0px 0px 0px;
	font-family: Tahoma;
	font-size: 10px;
}
#page_left {
	position: relative;
	background-color: #FFFFFF;
	left: 0px;
	top: 0px;
	width: 5%;
	height: 600px;
	float: left;
}
#page_content {
	position: relative;
	background-color: #FFFFFF;
	left: 0px;
	top: 1%;
	width: 90%;
	height: 600px;
	float: left;
}
#page_right {
	position: relative;
	background-color: #FFFFFF;
	left: 0px;
	top: 0px;
	width: 5%;
	height: 600px;
	float: left;
}
#header {
	position: relative;
	background-color: #CCCCCC;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 200px;
	float: left;
}
#body {
	position: relative;
	left: 0px;
	top: 1px;
	width: 100%;
	height: 550px;
	border: none;
	float: left;
}
#left_navigation {
	position: relative;
	background-color: #CCCCCC;
	left: 0px;
	top: 0px;
	width: 25%;
	height: 550px;
	float: left;
	padding: 10px;
}
#contents {
	position: relative;
	background-color: #CCCCCC;
	left: 1px;
	top: 0px;
	width: 75%;
	height: 550px;
	float: left;
	padding: 10px;
}
#footer {
	position: relative;
	background-color: #CCCCCC;
	left: 0px;
	top: 1px;
	width: 100%;
	height: 50px;
	float: left;
	padding: 10px;
}
</style>
</head>

<body>
<div id="page_left">
</div>
<div id="page_content">
	<div id="header">
		{HEADER}
	</div>
	<div id="body">
		<div id="left_navigation">
			{LEFT_NAVIGATION}
		</div>
		<div id="contents">
			{CONTENTS}
		</div>
	</div>
	<div id="footer">
		{FOOTER}
	</div>
</div>
<div id="page_right">
</div>
</body>
</html>
mickd
Forum Contributor
Posts: 397
Joined: Tue Jun 21, 2005 9:05 am
Location: Australia

Post by mickd »

anyone? its starting to get on my nerves :o

any help appriciated :wink:

EDIT: padding seems to make the div bigger somehow... dont know why. is there a way to do something like padding without increasing the size?

EDIT2: error2 solved. it was because the of the body id has top: 1px so therefore i needed to put top: 2px for the footer id.
Post Reply