CODEWITHSUNDEEP
htmlcssposition
bodokaiser
bodokaiser

Reputation: 15752

CSS: Place footer always at the bottom

I have following page layout:

<header></header>
<div id="content"></div>
<aside></aside>
<footer>
 <ul>
  <li></li>
 </ul>
</footer>

Now I want to place the footer exactly in the left corner:

text-align: left;
position: fixed;
bottom: 0;
margin: -16px -8px;

Now is the negative margin not the best solution. Are there better ways to positionate a footer directly in the corner?

Regards

Upvotes: 5

Views: 36140

Answers (4)

Rikin Patel
Rikin Patel

Reputation: 9403

HTML:

<div id="footer"></div>

CSS:

#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

Upvotes: 0

user2438788
user2438788

Reputation: 11

for me it works like this:

height: 58px;
position:relative;
bottom: -58px;

Note the same value for height and bottom. And the postion to relative.

Upvotes: 1

Obsivus
Obsivus

Reputation: 8359

Check this site Sticky Footer

Example:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

Upvotes: 7

sandeep
sandeep

Reputation: 92863

write like this:

text-align: left;
position: fixed;
bottom: 0;
left:0

Upvotes: 22

Related Questions