Trying to get a footer to stick to bottom of content div

[sparkyhughes]

I am making my first liquid style site, and am attempting to atatch a footer div to the bottom of a container div.

This container div stretches depending on the screen size.

At the moment the footer is absolutely positioned, at a set distance from the top of the page (500px at the moment).

When I resize the site in the browser window, the footer stays in its rigid position. How can I attach it to the bottom of the container div so that it stretches down with it?

The site is at:

http://www.munzamedia.co.uk/onlinelearning-0.1

Thanks,
Mark

[jbagley]

dont use absolute positioning. Use relative.

[sparkyhughes]

Cheers Jason, but I don't really understand relative positioning. I used it in the past and in Dreamweaver, it would display the web page in a completely messed up way so I stood clear of it.

I have a solution to my problem now - I placed the footer INSIDE the container div, and used bottom : 0px to stick it to the floor. No problems now.

[jbagley]

wait just a sec.... Which browser are you using for testing? Theres a huge horizontal scrollbar happening. View it in Firefox, the different elements dont line up. They line up in IE, except 1 element thats causing the horizontal scroll.

[sparkyhughes]

Now my menu stretches way off the right of the screen and I can't see why. I thought I had it finished as well.

[sparkyhughes]

I am using IE 6 for testing. It's fine in opera too, and I am not good enough a css / html coder to fix the site for them all. The main target is IE but if you have any suggestions about why it isn't working in Firefox I would be happy to listen.

I just spotted that horizontal thing too, needs some attention.

[nickroz]

You shouldn't use this table in the page:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="77%" valign="top"><h1>Welcome to our site!</h1>
      <p>&nbsp;</p>
      <p>Here you can find out more about our  distance learning.</p>
      <p>We offer an
          MSC in Tourism and Travel Management.</p>
      <p>&nbsp;</p>
      <p>Please select an item from the drop down menu above. Select the item
        that most fits your description</p>      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      </td>
    <td valign="top">
	<div class = "mainimage">
	  <div align="center"><img src="images/Asian_student.jpg" width="300" height="212"></div>
	</div>
	</td>
 
  </tr>

You should recode it into CSS. <div> the image and float it right; give it

float: right;
clear: none;
margin: 25px 30px 0px 0px;
border-top: 1px solid brown;
border-right: 1px solid brown;
border-bottom: 10px solid brown;
border-left: 1px solid brown;

This site is best viewed in Internet Explorer 6

I think that's your biggest problem right there. It's slightly F'd in Safari - the pic box is wide and the brown background on the navbar is too short for the images, so you see whitespace.

[sparkyhughes]

I appreciate your comments about me needing to get the site working in other browsers like Safari, but I though hybrid css / table layouts were ok to use as we can take advatages of both that way. I am not criticising, I just wondered why you said "you shouldn't use this table"

[Gotjesusyo]

One of many reasons to use tables for layout it less coding in the page.

Here is one site I admin and it is a table based layout with java and a little css.

www.baptistcollege.edu

Now compare it with the site i'm doing and also using to learn tableless css layout.

Also i use very little java in this page.

www.wfbu.com/index.asp (notice that it is html 4.01 strict)

Look at the page to get an idea of how i put it together to get my footer to flow and stay at the bottom. Here is the link to the css

www.wfbu.com/support/wfbu.css

Nate

[james]

I believe one of the latest tutorials goes into using absolute positioning, so it is compatible with W3C standards (that is, works in Moz/Opera) and that works in IE5.5+.

What you would do according to the W3C standards is put the footer container inside a body container, and give the footer style="position: absolute; bottom: 0px;". The standard says that it should be absolutely positioned relative to the containing element. To make it work in IE, you need to give they body container style="position: relative;", which it has by default anyway. You'll also want to make sure that a long page doesn't end with the content behind the footer, so you'll need to ensure that the padding-bottom of the body element is bigger than the height of the footer element.

Try this (untested):

<div style="position:relative; margin-bottom: 25px;">
Body Text
<div style="position:absolute; bottom:0px;height:20px;">Footer</div>
</div>

Things to note: 1) The footer will be right against the bottom of the body element. Try it out by giving the divs 1px borders. If you want to give it X pixels space, set bottom:-Xpx on the footer. 2) In the example there's at least 5 pixels space between the bottom of the body text. If you want it to be Y pixels, set padding-bottomX+Y+20)px on the body element. 3) If the footer get forced to be higher than 20 pixels by a very narrow screen, it will muck up your nifty calculations, and there isn't much you can do because the footer is 'out of the flow'. CSS isn't perfect for liquid layouts unfortunately.