Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by John Levy
John Levy
1,451 Points

Issues with applying padding at the bottom of the page

I am trying to add padding at the bottom of the page. When I do padding-bottom: 100px; it causes the image to stretch but it still stays at the bottom of the page. Where am I going wrong? I have attahced my code below Thanks in advance http://codepen.io/Johned22/pen/vKzAyd

John Nixon
John Nixon
17,690 Points

you have a style tag out of place in codepen, try <img style="position: relative;" id="thumbnail" src="thumbnail2.jpg" alt="image" />

6 Answers

Belve Marks
Belve Marks
7,332 Points
Belve Marks
Belve Marks
7,332 Points

I'm assuming that you're padding the div. One issue might be that your div is a specific size (defined as an inline style), and the image is positioned outside that size using both inline and external styles. I think the issue stems from having an in-line position:relative, but a styled #thumbnail with position:absolute. removing the absolute value seems to fix this issue. It might be easier to diagnose if you combined the css in the external stylesheet.

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

I am still having issues. When I do padding-bottom: 100px; it just stretches the image out but still stays at the bottom of the page. I attached the code for the HTML for all 4 images http://codepen.io/Johned22/pen/vKzAyd Thanks in advance

Belve Marks
Belve Marks
7,332 Points
Belve Marks
Belve Marks
7,332 Points

I think that style tag is still causing the problems. That's why codepen is coloring the code below that point white. An HTML <style> tag only takes a "type", "media", or "title" attributes, and also gets a closing tag. Any styles should go in between the tags, styled as CSS.

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Thanks for your reply. I took the width and height out of the html file and placed it in the CSS instead. I am still having the same problem. I attached my new code below. Can you give me an example of how I should lay it out as I dont know where to go from here? Thanks http://codepen.io/Johned22/pen/vKzAyd

Belve Marks
Belve Marks
7,332 Points

I couldn't replicate the image stretching bug on that codepen. it seemed ok to me. I think the div container is collapsing under your positioned image. If its only 16px tall, and you're padding 100px, it still won't get to the bottom of a 300px image. Does that make sense?

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

The height of the image is 330px. I set it to padding-bottom: 600px;. What happens is the image still looks exactly the same but the white margin on the bottom of the image is stretched to the bottom of the page. So it is still stuck at the bottom of the page. How do you recommend I edit the div container? Thanks

Belve Marks
Belve Marks
7,332 Points

I think I see: yes setting the padding of the image will do that. Padding is the space between the content and the border. It's filled with the background color of the element it belongs to (white in the case of the image). The margin is the space outside the border between the element and other elements, and is filled with the container element's background color. Setting that to 600 should be it.

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

I did border-bottom: 600px; and it did not change anything. This is the CSS I used-

thumbnail{

width: 210px;
height: 300px;
margin: 0px 10px 0px 245px;
position: absolute;
top: 260px;
left: 0px;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2), 0 8px 22px 0 rgba(0, 0, 0, 0.19);
transition: all .4s ease-in-out;
border-bottom: 600px;

}

What should I edit in the code so the image is not stuck at the bottom of the page? Thanks