View Full Version : Unwanted space between image and bottom

08-17-2009, 12:14 PM
I am making a website at the moment, and I want to have a picture kind of popping up from the bottom, but there is a white space which is between the image and the bottom of the page. The space is inside the footer area. How do I get rid of it?
Please bear in mind that I am completely new to this.

Footer code:

<div id="footer">
<p><img src="../toplogo2.png" width="487" height="169" hspace="0" vspace="0" /></p>
<!-- end #footer --></div>

Thank you!


08-17-2009, 12:17 PM
Try getting rid of your empty paragraph tags for starters <p></p>

That can't be helping.

08-17-2009, 12:21 PM
Nahh, those are spaces over the image, so it won't be so close to the text in the mainContent.
Thanks for your reply though, I actually learned something =P

(I did try to take the away anyway, but it didn't help.)

08-17-2009, 12:56 PM
No, you have one underneath the image as well, before the closing </div> tag. You have also wrapped your image in a paragraph tag. Paragraphs have 'natural' default margins and padding so you need to zero these to get rid of the gaps. I'd suggest your code should look more like;

<div id="footer">
<img src="../toplogo2.png" width="487" height="169" hspace="0" vspace="0"/>
<!-- end #footer --></div>

and then you can add CSS styles if you want to add margins to the 'footer' id;

#footer {margin-top: 25px;}

Don't use empty paragraph tags to set your spacing/layout. You will come unstuck and will struggle to get cross-browser uniformity and your code will get 'bloated' and not download as quickly as it should do.

08-17-2009, 01:07 PM
Do you understand the CSS Box Model?

08-17-2009, 03:29 PM
Hi, Corrosive!
Your solution worked perfectly, thank you for telling it in such a manner that a newbie like me could understand, and thank you very much for your replies, I have learned a lot!


(I first had some problems finding my #footer, as it was deleted, but I found out ;D)

08-17-2009, 03:54 PM
Ohh, if I could ask another question in this thread? (or else I make a new, just tell me)

If I want my #sidebar1 to go completely down to the bottom (or to the footer) on every page, what should I do?
The reason why I wnat to do it is because I have a right border which I think would be cool if it was showing all the way down, (at least to the footer).

Ok, I am sorry, but I have one more quick question. If I want an image to be shown over more than one div, what should I do? (I mean: Whenever I put an image in for example my mainContent, I cannot place it between the mainContent and the #sidebar, as it will be cut whenever it gets over to the #sidebars "border".)

Thanks again.

08-17-2009, 05:14 PM
Could you please start a thread for a new question. It makes it easier for users to search. Question one gets covered here all the time so do a search on that.

08-17-2009, 10:13 PM