CODEWITHSUNDEEP
htmlcss
StayAlive
StayAlive

Reputation: 23

How to create footers in CSS

I started learning CSS, HTML, and other cool stuff a day ago. I really don't understand why my footer isn't working.

Can you help me to solve my problem, tell me what I'm doing wrong, or just tell me, that I should go play tetris?

jsfiddle

HTML CODE : 

<title>MyDotCom</title>
<body>
  <div id="header">My awesome page title, logo, etc.</div>
  <div id="left">Navigation menu</div>
  <div id="bar">Random bar, lol.</div>
  <div id="footer">Coded by: me</div>
  <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
  </div>
</body>

CSS CODE : 

#header {
  border-radius: 5px;
  background-color: #C6E2FF;
  width: 100%;
  height: 100px;
  position: relative;
  margin-top: -10px;
  margin-bottom: 10px;
}
#bar {
  border-radius: 8px;
  background-color: #6E4005;
  width: 90%;
  height: 40px;
  float: both;
  margin-left: 10%;
  position: relative;
  z-index:1;
}
#left {
  float:left;
  background-color: #F6C483;
  margin-bottom: 10px;
  width: 20%;
  height:400px;
  position: relative;
  z-index: 2;
}
#content {
  position: relative;
  float: right;
  width: 80%;
  height: 360px;
  background-color: #F4EBC3;
  margin-bottom: 10px;
}
#footer {
  background-color: #B0B0B0;
  position:absolute;
  clear:both;
  height: 30px;
}

I tried to change position:absolute; to position:relative;, but it didn't work.

It's difficult to ask you for help, because probably it is really simple, but I tried, and tried, and have no idea what to do.

Upvotes: 2

Views: 441

Answers (4)

Anthony
Anthony

Reputation: 37045

Okay, I didn't want to take credit for someone else's work, but if more answers keep popping up that keep showing pieces of the generally accepted solution, my eye is gonna pop.

Source: Ryan Fait's HTML5 CSS Sticky Footer

HTML:

<body>
    <div class="wrapper">
        <p>Your website content here.</p>
        <div class="push"></div>
    </div>
    <footer>
        <p>Copyright (c) 2008</p>
    </footer>
</body>

CSS:

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

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

As I said in my comment to the OP, I'm not a huge fan of the technique because it requires a dummy div, but the point of the .push div is to match the height of the footer so that content in the primary div does not dip behind the footer and thus become hidden to the user but still visible to the window, which can be a serious pain.

Upvotes: 0

Bala
Bala

Reputation: 166

I just changed position:relative in footer and moved 

<div id="footer">Coded by: me</div>

below content..

http://jsfiddle.net/QALze/7/

Upvotes: 0

Patsy Issa
Patsy Issa

Reputation: 11293

Here are a few pointers, you need to set either bottom,top,left or right to position an absolute element.

Furthermore, wrap them in a container/wrapper and give it a position relative so the absolutely positioned element doesn't end up in odd places, the position relative forces it to the dimensions of the wrapper so bottom:0; makes it stick to the bottom of the wrapper.

When you float divs inside a container they are taken out of the flow resulting in an inaccurate auto height to the container, that's where the clear:both; comes into play.

Here is an updated jsfiddle with the fixed applied, and here's an awesome tutorial to get you going on the right path.

Happy coding.

Upvotes: 1

Gatekeeper
Gatekeeper

Reputation: 1616

What about removing position: absolute; and moving your footer below content in html?

modified code

Upvotes: 5

Related Questions