...

View Full Version : floating footer is not working - its not even appearing. Why



samhor
01-15-2013, 06:34 PM
Hello All,

I've got the below code and css. For some reason the footer is not appearing.

Any ideas?

LearningCoder
01-15-2013, 07:19 PM
Change your div#footer bottom property to 10px.

Make sure you add the px. When I just added '10' on it's own it appeared right at the top of the page.

Regards,

LC.

Excavator
01-15-2013, 07:21 PM
Hello samhor,
Did you mean to enclose your entire site in #header? It's easier to keep track of elements and where they are closed if you use a little indentation and some commenting.

Put a background color on your #footer and you should see it at the bottom of #wrapper. All your site in wrapped in absolute positioned #header does not expand #wrapper like you would think.
If you remove #footer from #wrapper your current CSS should put it at the bottom of the body.

You also use the wrong DocType Declaration. See the link about DocTypes in my signature line below. Any new .html document should have a Strict DocType.

I just re-arranged your markup a little, edited a little CSS and put an appropriate DocType in ...there is still plenty of other stuff that needs fixed -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Appster ~ The place to get your apps</title>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
font: 100% Verdana, Geneva, sans-serif;
color: #666666;
}
div#wrapper {
width: 900px;
margin: 10px;
text-align: left;
}
div#header {
position: absolute;
top: 0;
left: 10px;
height: 64px;
width: 500px;
}
div#bar {
width: 500px;
top: 190px;
height: 20px;
}
div#navbar {
width: 900px;
position: absolute;
top: 220x;
left: 10px;
}
div#content {
width: 100px;
position: absolute;
top: 290px;
left: 10px;
}
div#rightSidebar {
width: 200px;
position: absolute;
top: 290px;
left: 615px;
margin-right: 10;
font-size: 1em;
text-align: center;
}
div#footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
z-index: 20;
background: #f00;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<DIV align="left"><img src="appster banner.png" width="400" height="200"></div>
<!--end header--></div>
<div id="bar"><img src="bar.png" width="800" height="20"></div>
<div id="navbar">
<a href="Index.html"><img src="homebtn.png" border="0" width="100" height="50"></a>
<a href="DETAILS.html"><img src="DETAILSBTN.png" border="0" width="100" height="50"></a>
<img src="orderbtn.png" width="100" height="50">
<img src="slideshowbtn.png" width="200" height="50">
<img src="downloadbtn.png" width="200" height="50">
<img src="reportbtn.png" width="100" height="50">
<!--end navbar--></div>
<div id="content">
<p align="left"> content here </p>
<p align="left"> content here </p>
<p align="left"> content here </p>
<!--end content--></div>
<div id="rightSidebar">
<p> Want to advertise here?<br>
<a href="contactus.html">Fill in our contact us form</a> </p>
<p>Other Apps</p>
<p> <img src="ebaymobapp.jpg" alt="ebay mobile app" width="180" height="200">
</p>
<p>RIGHT BARRr</p>
<!--end rightSidebar--></div>
<!--end wrapper--></div>
<div id="footer">
<p align="left"> footer info </p>
</div>
</body>
</html>

Something else you should look at...#wrapper is 700px wide but you put 900px wide #navbar in it? See the box model here (http://www.w3.org/TR/CSS2/box.html). The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

samhor
01-15-2013, 07:37 PM
Change your div#footer bottom property to 10px.

Make sure you add the px. When I just added '10' on it's own it appeared right at the top of the page.

Regards,

LC.

Hello

Thanks for the information. I have amended the code and it seems to work fine now in firefox. But in IE the footer does not appear what so ever



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum