Solved

How can I make this footer stick to the bottom of the page?

Posted on 2013-10-31
2
351 Views
Last Modified: 2013-10-31
Here's my CSS:

body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
	background:#ffffff;
	padding:10px;
	text-align:center;
}
#body {
   padding:10px;
   padding-bottom:30px;   /* Height of the footer */
}

#body_container {
width:1000px;
margin: 0 auto;
height:100%;
}

#footer {
   position:absolute;
   padding-top:8px;
   bottom:0;
   width:100%;
   height:30px;   /* Height of the footer */
   background:#000000;
   text-align:center;
}

Open in new window


Here's my HTML:

<html>
<body>
   <div id="header"><IMG SRC="images/admin_header.jpg"></div>
   <div id="body">
            <div id="body_container">      
            
            <!--here's my content. Looks good until the page goes beyond the screen dimension and then the footer, while it looked good when you were perusing above the fold, is now
            in the middle of the screen. -->
            
            </div>
   </div><!-- concludes body --><BR><BR>
<div id="footer">
<table align="center">
<tr>
<td align="center" class="Footer">
<A HREF="http://www.specialpromotionsinc.com" target="_blank" class="Footer">Special Promotions Inc.</a> | 63 Music Square East | Nashville, TN 37203 | (p) 615.321.5130 | (f) 615. 320.1708
</td>
</tr>
</table>
</div>
</body>
</html>
Screen-Shot-2013-10-31-at-9.56.5.png
0
Comment
Question by:brucegust
2 Comments
 
LVL 15

Accepted Solution

by:
pateljitu earned 500 total points
Comment Utility
In your CSS please remove  position:absolute;, try this change:

#footer {
   padding-top:8px;
   bottom:0;
   width:100%;
   height:30px;   /* Height of the footer */
   background:#000000;
   text-align:center;
}

Open in new window

0
 

Author Comment

by:brucegust
Comment Utility
That did it!

Thanks!
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now