PDA

View Full Version : Footer underneath content - No overlapping


Sam
15 Oct 2009, 03: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:

<!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

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

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

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

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 :D
Wickham
16 Oct 2009, 04: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.