CODEWITHSUNDEEP
htmlcss
Zach Lysobey
Zach Lysobey

Reputation: 15724

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

I'm building a webpage which has an 'img' floated within a div as the lowest element displayed on page. The page ends abruptly at the bottom of the image. For nice aesthetics I would like the user to be able to scroll to just beyond the image (20px or so). I have attempted to apply margin-bottom and padding-bottom to both the body, a containing div, and the image in question but to no avail.

I have not, and will not try to do this using html to add a buffer or any other hackish solution.

The page: http://www.roughgiraffed.com/about.php (please don't judge us lol, still very rough (pun intended) and far from deployment)

Thank you in advance for any help!

Upvotes: 0

Views: 620

Answers (4)

talkingD0G
talkingD0G

Reputation: 413

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

Upvotes: 0

Jouke van der Maas
Jouke van der Maas

Reputation: 4318

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.

Upvotes: 2

Norbert de Langen
Norbert de Langen

Reputation: 181

Perhaps you styled THE element with display:inline?

Inline elements can't have padding or margins

Upvotes: 0

Strelok
Strelok

Reputation: 51451

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>​​​

Upvotes: 0

Related Questions