Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2012
    Location
    USA
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question floating footer is not working - its not even appearing. Why

    Hello All,

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

    Any ideas?
    Last edited by samhor; 01-15-2013 at 09:18 PM. Reason: spelling mistakes!

  • #2
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    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.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    Code:
    <!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. 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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Mar 2012
    Location
    USA
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by LearningCoder View Post
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •