Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

How to align footer to the bottom of the page in flexible design?

flexible design html5 footer

  • Please log in to reply
6 replies to this topic

#1 Stasonix

Stasonix

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 115 posts
  • Programming Language:C++, PHP, JavaScript, Delphi/Object Pascal, Pascal
  • Learning:C++, PHP, JavaScript, Delphi/Object Pascal

Posted 03 April 2012 - 09:54 AM

Code of my template:
html:


(Toggle Plain Text)

<div class='wrapper'>
<div class="header">LOGO my Site.php</div>
<div class="container">

</div>

<div class="footer">World &copy; TM</div>

</div>

css:


(Toggle Plain Text)

* {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.wrapper {
margin: 0 auto;
width: 100%;
background-color: #444555;
}

.header {
text-align: center;
margin: 0 auto;
width: 80%;
height: 5%;
color: white;
background-color: darkBlue;
}
.content {
width: 100%;
background-color: #FFBBAA;
}

.container {
margin: 0 auto;
border: 1px solid #00008B;
width: 80%;
background-color: #FFBBAA;
}

.footer {
position: relative;
margin: 0 auto;
width: 80%;
height: 10%;
clear: both;
border: 1px solid yellow;
background-color: lightblue;
text-align: center;
}

And fiddle tryout: example on fiddle
  • 0

#2 RhetoricalRuvim

RhetoricalRuvim

    JavaScript Programmer

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1311 posts
  • Location:C:\Countries\US
  • Programming Language:C, Java, C++, PHP, Python, JavaScript

Posted 03 April 2012 - 04:32 PM

What does the '*' in the CSS near '* { ...' mean?

Have you tried changing .wrapper's height to 100% and commenting out *'s height (even though I don't know what * means in this context)?
  • 0
Regards,
RR

#3 WingedPanther73

WingedPanther73

    A spammer's worst nightmare

  • Moderator
  • 17757 posts
  • Location:Upstate, South Carolina
  • Programming Language:C, C++, PL/SQL, Delphi/Object Pascal, Pascal, Transact-SQL, Others
  • Learning:Java, C#, PHP, JavaScript, Lisp, Fortran, Haskell, Others

Posted 03 April 2012 - 06:09 PM

The * { means "apply this to ALL elements".
  • 0

Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

My MineCraft server site: http://banishedwings.enjin.com/


#4 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 04 April 2012 - 01:10 AM

I believe that's done with a body of 100% height (so it pushes footer just under the screen), and having a footer with negative margin.
  • 0

#5 gregwarner

gregwarner

    Obi Wan of Programming

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1586 posts
  • Location:Arkansas
  • Programming Language:C, Java, C++, C#, PHP, Transact-SQL

Posted 04 April 2012 - 05:28 AM

A better way, in my opinion, (which is the way I now do it), is to set the position attribute to 'relative' on the expandable container. This doesn't move the container at all, but it has the affect of allowing its children to be absolutely positioned within it. Set the position attribute for the footer (or whatever element you want to be snapped to the bottom) to 'absolute', and set its bottom attribute to '0 px'. No wrapper is needed, as long as you make the footer a subelement of your content. (You might also have to set the padding-bottom of the container to the height of the footer.)

Edit: Just realized this: My way snaps the footer to the bottom of the content, whereas wim DC's will snap it to the bottom of the screen. Depends on which effect you need.
  • 0

ti-99-sig.png
Hofstadter's Law: It always takes longer than you expect, even when you take into account Hofstadter's Law.
– Douglas Hofstadter, Gödel, Escher, Bach: An Eternal Golden Braid


#6 keat

keat

    CC Lurker

  • New Member
  • Pip
  • 4 posts

Posted 09 April 2012 - 02:36 AM

There is a way I think will work .Try assigning to above containers a min-height:95% by example .Or simply play with this value .
The footer will always stay very low .
something like :
adding this to your content div :

.content {
width: 100%;
min-height:95% ;
background-color: #FFBBAA;
}


This will make the above container really 'tall' and will push the footer down.
  • 0

#7 sweta

sweta

    CC Lurker

  • New Member
  • Pip
  • 3 posts

Posted 12 April 2012 - 12:10 AM

Footer Center Align With Full Width
I think the above can be achieved using the following

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Footer Center Align With Full Width</title>
<style type="text/css">
.footer{ position:absolute; bottom:0; width:100%; text-align:center; background-color:#CCC; margin:0; padding:5px 0;}
body{margin:0;}
</style>
</head>

<body>
<div class="footer">footer</div>
</body>
</html>

[b]Footer Left/Right/Center Align With Fixed Width[/b]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Footer Left/Right/Center Align With Fixed Width</title>
<style type="text/css">
.container{ width:800px; margin:0 auto; padding:0;}
.footer{ position:absolute; bottom:0; width:800px;

text-align:right /*Change for right/Left/Center Align*/ ; background-color:#CCC; margin:0; padding:5px 0;}
body{margin:0;}
</style>
</head>

<body><div class="container">
<div class="footer">footer</div>
</div>
</body>
</html>
Sweta
  • 0





Also tagged with one or more of these keywords: flexible, design, html5, footer

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download