ansaurus

Question

How to add padding to bottom of site containing a floated img?

Answer 1

A:

I did the following as a test and that makes the body overflow and show a vertical scrollbar. Try it.

<html>
<body>
   <div id="container">
      <div id="imageContainer" style="padding-bottom:1000px;">
         <img src="youImage.jpg"/>
      </div>
   </div>
</body>

Also, the following is a slightly different approach:

<html style="height: 110%;">
<body>
   <div id="container">
      <div id="imageContainer">
         <img src="youImage.jpg"/>
      </div>
   </div>
</body>

Strelok 2010-08-10 23:41:54

Thank you for the effort, but the first approach is similar to what I have been trying (it fails in my case) and the second doesnt really apply to my case.

Zach Lysobey 2010-08-10 23:51:07

Answer 2

A:

Perhaps you styled THE element with display:inline?

Inline elements can't have padding or margins

Norbert de Langen 2010-08-10 23:46:29

Answer 3

+2 A:

Try adding overflow: hidden; on #container. The floats are taking the .profile divs out of the flow of the document, which makes the browser think #container is only as high as the general text. Setting an overflow somehow resets this. When you've added it, you can set a margin on the container as you normally would.

Jouke van der Maas 2010-08-10 23:55:03

Brilliant! This tip worked like a charm. Not really sure why it works, but this was just what I needed.

Zach Lysobey 2010-08-10 23:59:23

I don't either. I stumbled into it once after ages of going trough useless samples. I'll never forget it and try to share it as much as possible to save others from that.

Jouke van der Maas 2010-08-11 00:04:43

Answer 4

A:

You should be able to add margin-bottom to your body tag.

body { margin-bottom: 20px; }

Otherwise you can ad that margin-bottom to your container

<div id="container"> 
   <img src="yourimage.jpg" alt="" />
</div>

#container { margin-bottom: 20px; }

NOTE: both methods worked when tested

s_broderick 2010-08-11 14:13:27

yup thats what I tried to do; problem was related to a floated image as the lowest element on the page I think. I am updating the original question to reflect this.

Zach Lysobey 2010-08-11 17:10:59

ansaurus

tags:

views:

answers:

How to add padding to bottom of site containing a floated img?

related questions