Web Analytics Made Easy -
StatCounter Head Over Heals with CSS Footer - CodingForum


No announcement yet.

Head Over Heals with CSS Footer

  • Filter
  • Time
  • Show
Clear All
new posts

  • Head Over Heals with CSS Footer


    Ive been working on a my first CSS site today, Ive used css loads in the past but always to format a well crafted table skelleton. Ive managed to make my way through the first page and Ive learnt loads. The last thing to be added was the footer which now appears fine in IE but it appears half way up the page in FF and I cant figure out why and ive spent about 4 hours now reading up on things and trying new ideas

    The main body is fixed width and i want the footer to be 100% so I have a container around the main body to set the width and I have opened a new container which will be the footer and stretch with the text centered.

    I presume its a problem with IE not FF but what am I doing wrong?

    I hope (fingers crossed) that the files are attached with the post.

    Any help with this would be greatly appreciated as would any tips on improvement for my first full CSS adventure.

    Attached Files

  • #2
    It would be helpful to see the page where you are working on it. Without it, my best guess is you are not clearing out floated div elements. FF properly doesn't enclose a floated div based on the largest element inside the div, but IE does. I personally find it to be a pain and I got bit on this same thing (and still occasionally do). You just need to use "clear: both" on the css of the div just below the floated div.


    • #3
      I've not sorted out the hosting yet so i'm working locally which is a bit of a pain but it saves me money whilst developing.

      That worked great, I added: clear: both; to the footer definition and it now appears at the bottom where its supposed to which is great. I was getting ready to give up on the idea and go back to tables, thanks Fumigator.

      Where can I read up on this kind of documentation? I didnt even know that "clear" existed and I could do with reading into it a little further.


      • #4
        Whilst I was researching this one I came across a term called divitis which I thought was pretty self explanatory and ive tried to keep my code as clean as possible in any project css or not but as this is my first attempt I dont want to fall into a habit of bad css coding from the beginning.

        I'm using a container for the body, header, content and footer but Im using a container for the content of the header and content because the fixed width and padding stretches out the div container, this happens with tables too but am I doing it the "best" way?

        I have seen this method used before but I could save the extra divs and not have the header width set, I could create the same effect with the content and use padding to get the right size but this will be pain if I want to change the content.

        Have I missed anything, is there a better way?