Footer image not behaving.

[Tomi]

Ok, I'm a total noob to Xhtml/CSS. I have decided to learn both so I made this design, sliced it and coded it. Obviously with some help from people (thanks!).

It was all going fine untill i came to put the footer in. As you can see here:
http://www.jrcdesigns.co.uk/test/Leafy/ Its sitting near the top of the page...

It should be at the bottom, i have no idea why it is there. I have asked 4 coders all of which have no idea lol...

Please find both the CSS and XHTML code in the source.

Thanks
Tomi

[rangana]

Which div is it? The text2? Anyway, i'm not certain which one are you referring, but see if adding clear:both helps

[Tomi]

The div I'm talking about is <div id="leaf2">, its at the bottom of the code.

I have tried clear:both before and it didn't work.

[rangana]

First of all, id is unique in every page. You have two container ids.

Fix your markup error as well as your CSS error.

You also had a lot of divs which I'm certain, that it's divitis

I'm not always fund of using absolute positioning as it gives you a brittle layout, but in your case, since you've got a lot of divs, and you miss to put them in one container, then I would suggest changing your rule in leaf2 to this:

Code: Select all

#leaf2{
      position:absolute;
      bottom:0px;
        width:100%;
        height:47px;
        background-image:url(images/footer.jpg);
}


Hope it helps.