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

William Newell
William Newell
1,482 Points

placing a div to bottom of image div

Hi

I have a div that contains a image.

I have placed another div inside of image div so as to write a caption.

I have positioned parent image div as relative and child div as absolute.

width: 100%; position: absolute; bottom: 0; background-color: black; height: 10%;

The child div does sit nicely to the bottom of div but when expanding browser the child div rises up of the bottom.

I want it to stick to bottom and scale along with parent container.

I have used floats also but does the same.

David Bath
David Bath
25,940 Points

Hmm, from your description I don't see anything wrong with your code. If you try it in a different browser does it do the same thing?

Can you post your whole code for us to evaluate it?

1 Answer

William Newell
William Newell
1,482 Points

This is my code.

div.box1 is div for image.

div.test is div for placing at bottom.

div.box1 img is image itself.

...div.box1 { min-width: 24%; display: inline-block; margin: 0; position: relative; }

div.test { width: 100%; position: absolute; bottom:0; background-color: black; height: 10%;

}

div.box1 img {

min-width: 100%;

}

...

I have removed fixed height and changed it to auto and it works fine. can some one give me a reason for this. Thanks