homepage Welcome to WebmasterWorld Guest from 54.211.230.186
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Fixed Footer bottom of the page
omegaone



 
Msg#: 4414531 posted 8:41 pm on Feb 5, 2012 (gmt 0)

Hello I'm trying to code a HTML5 website and I've been stuck on trying to get the footer to stay aligned at the bottom of the webpage. I want the footer to also have the background cover the full width of the wrapper (not the browser page). But the footer would always become off centered or not aligned properly if the webpage got too big.

any ideas?

Thanks.

html {
height: 100%;
}

body {
font: normal 16px/18px helvetica,arial,sans-serif;
color: #555;
margin: 0;
padding: 0;
background: url(images/bg.jpg) repeat;
height: 100%
}

div#wrapper {
width: 1000px;
margin: 0 auto;
background: #fff;
overflow: hidden;
height: auto;
min-height: 100%;
}

footer {
position: relative;
width:1000px;
text-align-center;
float: left;
height: 60px;
margin: 0;
border: 0;
padding:0;
border-top: 1px solid #ddd;
background-color:#06C;
}

edit: whops forgot to correct it in the post.

[edited by: omegaone at 9:28 pm (utc) on Feb 5, 2012]

 

penders

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 4414531 posted 9:14 pm on Feb 5, 2012 (gmt 0)

width:1000;
text-align
-center;


Should be:
width:100px;
text-align
: center;

I'm not saying this will solve your problem, but it's a start.

Marshall

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4414531 posted 9:37 pm on Feb 5, 2012 (gmt 0)

Are you referring to a sticky footer?

Marshall

omegaone



 
Msg#: 4414531 posted 9:50 pm on Feb 5, 2012 (gmt 0)

Maybe? Just want it to stay at the bottom but only cover the size of the wrapper and stay aligned properly no matter the amount of text.

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4414531 posted 11:12 pm on Feb 5, 2012 (gmt 0)

We'd need to see a bit of the html that uses the CSS. If you want the footer to be no bigger than the wrapper, it needs to be inside the wrapper.

text-align-center;
float: left;


Not too sure about this.

Marshall

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4414531 posted 12:08 am on Feb 6, 2012 (gmt 0)

omegaone,

I sent you a sticky mail with a link to a site with a sticky footer. I think it what you want.

Marshall

omegaone



 
Msg#: 4414531 posted 12:09 am on Feb 6, 2012 (gmt 0)

Copied out the structure of the webpage below.


<!doctype html>
<head>

<link href="ie.css" media="screen" rel="stylesheet" type="text/css">

<link href="default.css" media="screen" rel="stylesheet" type="text/css">

<link href="style.css" rel="stylesheet" type="text/css" media="screen" charset="utf-8">

</head>

<header>
<span id="siteName"><a href="./"><span></span></a></span>
<span id="siteTagline"></span>
<center><img src="images/header.jpg" alt="" height="80" width="500"><center>
</header>
<!-- / header -->

<!-- begin nav -->
<div id="nav">
<div class="art-bar art-nav">
<div id="navigation" class="menu-menu-container">
Nav ul listing etc
</div>
<!-- end nav -->

<!-- Content -->
<section id="pageContent">
<article>
</article>
</section>

<!-- footer -->
<div id="footer">

</div>
<!-- footer -->

</div><!-- wrapper -->

Marshall

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4414531 posted 12:21 am on Feb 6, 2012 (gmt 0)

Here's the CSS and HTML I use for the sticky footer. Obvious some measurements will have to be adjusted to fit you needs.

CSS
<style type="text/css">
/* STICKY FOOTER CSS */
#sticky_navigation {
min-width: 600px;
position: relative; /*this you need on your footer, position: relative;*/
}

#sticky_container {
min-width: 600px;
position: relative; /*this you need on your footer, position: relative;*/
}

/*IE6 hack for min-width... skipped*/

#sticky_container {
min-height: 100%; /*100%; height model again*/
/*font: normal 1em/1.5em arial, helvetica, sans-serif;*/
}
* html #sticky_container {
height: 100%; /*IE6*/
}
/*here's footer:*/
#sticky_navigation {
width: 100%;
background: url('../images/clear_bg.gif');
position: fixed;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1000;
}

/*IE6 and below don't understand position: fixed... if you need to support them, you'll need this... does NOT work on browsers who have Javascript turned off!*/
* html #sticky_navigation {
position: absolute;
width: 100%;/*IE5.5*/
bottom: 0;
left: 0;
overflow: visible; /*earlier had overflow: hidden on various things... you might not need this line*/
top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}/*that was the CSS Expression for position: fixed at the bottom of the page. */

/*the rest is my menu inside.*/
#sticky_navigation #sticky_navmenu {
margin: 0 auto;
position: relative;
z-index: 10;
width: 590px;
background: url('../images/clear_bg.gif');
text-align: center;
color: #009;
}
</style>

HTML
<body>
<!-- BEGIN STICKY FOOTER - PLACE IMMEDIATELY BELOW BODY TAG -->
<div id="sticky_navigation">
<div id="sticky_navmenu">
<!-- YOUR NAVIGATION -->
</div>
</div>
<!-- END STICKY FOOTER -->

Marshall

omegaone



 
Msg#: 4414531 posted 1:16 am on Feb 6, 2012 (gmt 0)

Hi Marshell was not after the navigation but wanting something similar to your footerwrap/content thing at the bottom of the page itself? (Unless that's it?)

Marshall

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4414531 posted 3:33 am on Feb 6, 2012 (gmt 0)

omegaone,

What I posted above is the CSS and HTML for the footer in the link I sent you. I thought I would share it with the thread. You should be able to copy and past what I posted and test it in a page, adjusting it to your needs.

Marshall

alt131

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4414531 posted 6:13 pm on Feb 7, 2012 (gmt 0)

Hi omegaone and welcome to WebmasterWorld :)

Best not to go off-forum, so Marshall thanks for providing the code. Always interesting to see how others decide to deal with sticky footer's - there are so many different approaches to dealing with them depending on your coding preferences.

Marshall this is incidental given the issue is slightly different here and you've already got a working solution, but it crossed my mind you might enjoy Paul_o_b's summary of issues in Sticky Footer [webmasterworld.com] if you missed it last year.

Marshall

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4414531 posted 7:16 pm on Feb 7, 2012 (gmt 0)

Should I say "you're welcome" and "thank you." ;)

Actually, I am not big on sticky footers, but a client of mine wanted one. They do offer some advantages, but in my example and what I primarily do not like, is how the footer is out of the natural flow, appearing just below the <body> tag. However, is does not seem to have affected my client's pages insofar as SERPs are concerned.

Marshall

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved