View Full Version : using a div with a BG image as a footer

09-21-2006, 10:56 AM
Hi all,

Just wondering if someone could help me get a div with a BGimage set from my css to behave as if I had just placed the image in with blahblah.

If i use the <img> tag then the footer will move down if/when i add more content to the body of my file (container div), if I use a div and add my footer as a background image then it doesnt move down the same.
Ive been putting invisible lines of

(well white ones,ha) on the bottom row to get the footer div to move down, I dont like this and Im sure you lot wont either !ha

Is this just a flow property im missing or something like that ??

Oh, by the way, im using image replacement so there is a

footer</p> in there with {text-indent:-9999px;}

Im working off my drive at the mo but if you need to see I can upload it somewhere or post my css/xhtml.


09-21-2006, 12:30 PM
A <div> should be pushed down by content the exact same way a <img> would be so I'm not sure I udnerstand. And you're not providing any code..

09-21-2006, 12:55 PM

If you look on the contact page you can see the problem I have.

Im not sure if im missing something or not (sorry if this is something stupid)

Also if you highlight all on the clients page you can see the

i have had to insert "blocker text" to stop this issue.

any ideas would be appreciated.


09-21-2006, 05:19 PM
This happens when you float elements. Since elements are supposed to float next to the natural flow of the content, you often have to 'clear' the floats for the next elements to appear beneath them. The CSS property is called 'clear', and adding this line to you CSS should fix it for you:
#footer {
background:url('../images/Ezine_footer.jpg') 0 0 no-repeat;
text-indent: -9999px;
clear: both;

09-22-2006, 08:19 AM
Cheers mate that works great.

So does the clear property make the selected part of the document behave like the rest is in normal flow ?

09-22-2006, 12:52 PM
It's kinda hard to explain.. when you clear: right, it 'looks' to the right side and makes sure there's no floating elements on that side, if there is, it will go down until the floated element ends.

09-22-2006, 01:12 PM
I understand, thanks for the help Domedia.