Footer underneath content - No overlapping

Sam · 15 Oct 2009, 02:55 AM

Hi everyone, I have a few problems with my code, but the first one is that I can't get the footer to go below the content area. I don't want it stuck to the bottom of the page. Here's my code...

Markup:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--This code is copyright 2009 Sam Wright. All rights reserved -->
<html lang="en">
<head>
<title>The Common Room >> Find the answer to all your RuneScape questions</title>
<meta name= "description" content="Find the answer to all your RuneScape questions..."/>
<meta name="keywords" content="fansite,guides,help,answers,runescape,forums" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="author" content="The Common Room staff"/> 
<meta name="distribution" content="global"/> 
<meta name="rating" content="general"/> 
<link href="css/header_style.css" rel="stylesheet" type="text/css"/> 
<link href="css/navigation_style.css" rel="stylesheet" type="text/css"/> 
<link href="css/content_style.css" rel="stylesheet" type="text/css"/> 
<link href="css/footer_style.css" rel="stylesheet" type="text/css"/> 
</head>
<body>
<div class="page">

<div class="header">
		<div class="skin_changer">
		</div>
		<div class="logged_in_as">You are logged in as <div class="logged_in_as_username"><?php echo returnUsername(loggedUser()); ?></div>
		</div>
</div>

<div class="navigation">
	<div style="text-align:center;font-weight:bold">Home</div>
	<ul class="navigation">
	<li class="list_title">Community</li>
	<li><img src="images/cup.png"/> Forums</li>
	<li><img src="images/help.png"/> Answers</li>
	</ul>
</div>

<div class="content">
	<div class="search"><img src="images/find.png"/> Search: <input value="Enter search here"></input></div>
	<!--<div class="recent">
		<div class="left"><div id="twitter_div">
<ul class="twitter" id="twitter_update_list"></ul>
</div>

</div>
		<div class="right"><ul><li>test</li></ul></div>
	</div>-->

	<div class="main_title">Main Title</div>
		<div class="news_date">XX/XX</div><div class="news_title">News Title</div>
			<div class="news_body">News body</div>
			<br />
</div>
<!--div.page end --></div>
<div class="footer">Copyright 2009 Sam Wright. All rights reserved.</div>

<!--scripts
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/OfficialJagex.json?callback=twitterCallback2&amp;count=3"></script>-->
</body></html>

Header_style.css

Code:

body {
	margin:0;
	font-family:arial;
	font-size:12px;
	background-color:#000000;
	color:#FFFFFF;
}

a {
color:white;
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

div.page {
	padding-left:5%;
	padding-right:5%;
}

div.header {
	width:auto;
	background-image:url('http://tehcommonroom.com/forums/themes/hd/img/head_image.png');
	background-repeat:no-repeat;
	background-color:#1442B2;
	text-align:center;
	height:142px;
	margin-bottom:12px;
	-moz-border-radius-bottomright:5px; 
	-moz-border-radius-bottomleft:5px; 
	-webkit-border-radius-bottomeight:5px;
	-webkit-border-radius-bottomleft:5px; 
}
div.logged_in_as {
	top: 126px;
	font-size: 12px;
	font-weight: bold;
	position: relative;
	width: 100%;
	text-align:right;
 }

Content_style.css

Code:

div.content {
	float:right;
	width:80%;
	border:#061640 4px solid;
	background-color:#043682;
	padding:4px;
	-moz-border-radius:5px; 
	-webkit-border:5px;
	min-height:80%;
	position:relative;
}

div.search {
	float:right;
	background-color:#224C8C;
	margin-top:-4px;
	margin-right:-4px;
	padding:4px;
	-moz-border-radius-bottomleft:5px; 
	-webkit-border-bottomleft:5px;
}

div.recent {
	margin-left:auto;
	margin-right:auto;
	width:90%;
}

div.left {
	float:left;
	width:35%;
}

.twitter li {  
	border-bottom:1px white solid;
	padding-bottom:4px;
	padding-top:4px;
}  

div.right {
	float:right;
	width:35%;
}

div.main_title {
	font-size:30px;
	text-align:center;
}

Navigation_style.css

Code:

div.navigation {
	float:left;
	width: 15%;
	border:#061640 4px solid;
	background-color:#043682;
	padding:4px;
	-moz-border-radius:5px; 
	-webkit-border:5px;
}

.navigation  {
width:100%; 
list-style:none; 
padding:0;
margin:0;
}

.navigation li:hover {
background-color:#03265d;
}

.navigation li {
margin:0; 
padding:2px;
padding-left:6px
}

li.list_title {
padding-left:2px;
}

Footer_style.css

Code:

 div.footer {
	width:80%;
	margin-left:auto;
	margin-right:auto;
	border:#061640 4px solid;
	background-color:#043682;
	padding:4px;
	-moz-border-radius:5px; 
	-webkit-border:5px;
}

Thanks

**Wickham** · 16 Oct 2009, 03:33 AM

Adding clear: both; moves it just below the divs above:-
div.footer { clear: both;
width:80%;
margin-left:auto;
margin-right:auto;
border:#061640 4px solid;
background-color:#043682;
padding:4px;
-moz-border-radius:5px;
-webkit-border:5px;
}

border-radius 5px is almost too small to see, so I tried 10px and it is working in Firefox and Safari but remember that CSS3 radius styles don't work in IE.

Thread: Footer underneath content - No overlapping

Thread Tools

Footer underneath content - No overlapping

Tags for this Thread

Posting Permissions