OK, this is almost a confession:

 

In the sites I've built so far since learning CSS I've avoided trying to use a "floating"(?) footer which stays at the bottom of the page as the content on different pages varies in content. So the site expands vertically, everything stays where it should . . . including the footer.

 

Up til now I've avoided relative positioning and made too much use of autoflow in different divs so the footer doesn't have to move (it's positioned absolutely).

 

So can anyone point me at some reliable code that will allow me to learn and make this obviously important step.

 

Thanks,

 

Jo

Check out this tutorial

 

That's usually what I use.

Hi, thanks for the reply.

 

I'm not trying to achieve a footer fixed to the foot of the browser.

 

I want the footer fixed at the foot of the page so, if the page contains lots of content, the footer moves down as the content expands - disappearing below the fold if necessary.

 

Thanks again.

That's exactly what the tutorial shows you how to do! If the content is more than the visible viewport (requires a scrollbar) then the footer moves down, so that it's still below the content.

Ooops! Thanks,

 

I'll take a closer look.

I'm doing something wrong.

 

This is the layout I want to achieve so thanks for the pointer.

 

I've put in a test text box with lots of duplicated text to see if the footer stays at the bottom. But it doesn't work!?

 

Here's the code

 

CSS

html,
body {
  margin:0;
  padding:0;
  height:100%;
}
#container {
  min-height:100%;
  width: 900px;
  position:relative;
margin-right: auto;
margin-left: auto;
}
#header {
  background:#ff0;
  padding:10px;
}
#body {
  padding:10px;
  padding-bottom:60px;   /* Height of the footer */
}
#footer {
  position:absolute;
  bottom:0;
  width:900px;
  height:60px;   /* Height of the footer */
  background:#6cf;
}

#text2 {
position:absolute;
top:170px;
left:556px;
width:333px;
min-height:100%;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
text-align:left;
color: #000000;
border-top: 0px solid #FFFFFF;
border-left: 0px solid #FFFFFF;
border-right: 0px solid #FFFFFF;
border-bottom: 0px solid #FFFFFF;
}

 

HTML

<!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=ISO-8859-15"><title>online pet insurance for cats and dogs</title>

   <meta name="Description" content="pet insurance">
<meta name="Keywords" content="pets, cat insurance, dog insurance, online pet insurance, vets fees, pet insurance quotes">
<meta name="Author" content="">
<meta name="robots" content="index,follow">
<link href="test1.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="container">
  <div id="header"></div>
  <div id="text2">
We specialise in providing insurance for cats and dogs.
  <p>For today's responsible pet owner, pet insurance is a necessity.  If your pet is ill or injured you will want to be able to base your decisions onwhat is best for your pet, not on what you can afford. For a few pounds a month you can enjoy peace of mind, knowing that you and your pet are protected.</p>
  <p>When considering insurance for your pet it's important to remember that not all insurance policies are the same,and cheapest doesn't always equalvalue for money. With every supermarket and bank vying to sell you theirinsurance, don’t be distracted by special offers or promotions. Rememberthat this policy will be for the life of your pet  and a “free” gift vouchertoday won’t make up for any short fall in cover in the future.</p>
  <ul>
    <li><span class="black">cover for life</span></li>
    <li><span class="black">up to £4,000 per year in treatment costs</span></li>
    <li><span class="black">cover for alternative therapies</span></li>
    <li><span class="black">no 12 month limiton treatment</span></li>
    <li><span class="black">no exclusions after a claim</span></li>
   </ul>

  <p>peace of mind, knowing that you and your pet are protected.</p>
  <p>When considering insurance for your pet it's important to remember that not all insurance policies are the same,and cheapest doesn't always equalvalue for money. With every supermarket and bank vying to sell you theirinsurance, don’t be distracted by special offers or promotions. Rememberthat this policy will be for the life of your pet  and a “free” gift vouchertoday won’t make up for any short fall in cover in the future.</p>
  <p>peace of mind, knowing that you and your pet are protected.</p>
  <p>When considering insurance for your pet it's important to remember that not all insurance policies are the same,and cheapest doesn't always equalvalue for money. With every supermarket and bank vying to sell you theirinsurance, don’t be distracted by special offers or promotions. Rememberthat this policy will be for the life of your pet  and a “free” gift vouchertoday won’t make up for any short fall in cover in the future.</p>
  <p>peace of mind, knowing that you and your pet are protected.</p>
  <p>When considering insurance for your pet it's important to remember that not all insurance policies are the same,and cheapest doesn't always equalvalue for money. With every supermarket and bank vying to sell you theirinsurance, don’t be distracted by special offers or promotions. Rememberthat this policy will be for the life of your pet  and a “free” gift vouchertoday won’t make up for any short fall in cover in the future.</p>
  <p>peace of mind, knowing that you and your pet are protected.</p>
  <p>When considering insurance for your pet it's important to remember that not all insurance policies are the same,and cheapest doesn't always equalvalue for money. With every supermarket and bank vying to sell you theirinsurance, don’t be distracted by special offers or promotions. Rememberthat this policy will be for the life of your pet  and a “free” gift vouchertoday won’t make up for any short fall in cover in the future.</p>
  </div>
  <div id="body">
  <div id="footer"></div>
 </div>

</div>
</body></html>

 

Thanks again.

In case you haven't got time to go through the code, what I've done is used the code from the tutorial you sent me the link for.

 

Then I put in a text box which I was hoping would force the footer down as it filled with content. It's situated in the "container" div. But it's not happening. It works if I put text directly into the container div. This is where the problem is I think:

 

CSS

html,
body {
  margin:0;
  padding:0;
  height:100%;
}
#container {
  min-height:100%;
  width: 900px;
  position:relative;
       margin-right: auto;
       margin-left: auto;
}
#header {
  background:#ff0;
  padding:10px;
}
#body {
  padding:10px;
  padding-bottom:60px;   /* Height of the footer */
}
#footer {
  position:absolute;
  bottom:0;
  width:900px;
  height:60px;   /* Height of the footer */
  background:#6cf;
}

#text2 {
       position:absolute;
       top:170px;
       left:556px;
       width:333px;
       min-height:100%;
       text-decoration: none;
       font-family: Arial, Helvetica, sans-serif;
       font-size: .8em;
       text-align:left;
       color: #000000;
       border-top: 0px solid #FFFFFF;
       border-left: 0px solid #FFFFFF;
       border-right: 0px solid #FFFFFF;
       border-bottom: 0px solid #FFFFFF;
}

Edited January 26, 201016 yr by Sam G
added [code] tags

The problem is with the "text2" div.

 

But what???

These tags are in the wrong order:

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

 

It should be:

<div id="body">
<!-- body content here -->
</div>
<div id="footer">
<!-- footer content here -->
</div>

 

The overall layout of the page should be:

<div id="container>
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div><!-- close container>

 

 

Basically, any content you want to add goes in the body div. If you apply the original CSS from the tutorial, then fill the body div with your text then you'll notice the footer moving down.

also because you are using absolute positioning for your text box, because you are doing this the browser doesn't actually know the height of the page, so it is placing the footer at the bottom of the window rather than the bottom of the page.

Thanks,

 

I tried that and the footer does move further down but not completely below the text2 box!!?

Like Dizi said, you don't need the absolute positioning in text2.

Here's an example of it working:

http://omegled.com/footer/

 

You can copy the HTML and CSS from there if you want.

OK, definately getting closer but can you have a look at this link. The footer's moving down but not enough to accommodate all the text in the text2 div.

 

test page

Don't know what happened to the link. Here it is again:

 

 

http://www.arecadesign.co.uk/iptest/test1.html

I've got it to work by experimenting with the bottom padding of the body div. But I seem to have gone against what was recommended in the tutorial ie:

 

"The body is quite normal too. The only important thing is it must have a bottom padding that is equal to (or slightly larger than) the height of the footer. You can also use a bottom border if you prefer but a margin won't work."

 

My footer is 20px high but the bottom padding is 160px!

 

It seems to work. Is there be something I need to know about that?

Why are you using position:relative; and position:absolute so much?

It's not that they're no-nos, but they are definitely a "do avoid unless you need them".

 

The problem is that the content inside the body div is absolutely positioned. Normal elements all follow a flow, and cause the page structure to be build up as a set of sequential blocks.

Using position:absolute; breaks out of the sequence, and that element will work without paying attention to the regular flow. It will appear absolutely anywhere you tell it to, and overlay an existing block if its position conflicts with another block.

(Note: An element with position:absolute, inside an element with position:relative will be positioned relative to it's container (not to the page). Therefore as a quick-fix it might be possible to add position:relative; to the body div's CSS) - but I'd STRONGLY advise you not to do this, and instead style the page without unnecessary absolute positioning.

 

To position elements left or right, you normally use the float property. To add whitespace above below you use margins and padding. If you want an element to appear below the previous element, you use clear.

 

I know the very first CSS site I built used a lot of absolute positioning, but I know a lot better know that that's not the best way to do things.

This is what I need to understand. It's too easy when you get comfortable working in one way, and getting workable results, to stick to it.

 

Your advice is really clear and I'll use it in this design and going forward.

 

Thanks for your time!

Actually, as I try to do it without using absolute positioning, it seems to be a lot more complicated to position things. One element impacts on another.

 

No doubt I'll get the hang of it . . . eventually but it does seem a lot more complicated at first.

 

And to be honest, I'm not entirely clear on what the advantages of using this method are. The css doesn't seem any lighter - there seems to be a similar amount of code.