Link to home
Start Free TrialLog in
Avatar of Larry Vollmer
Larry Vollmer

asked on

Snap images to the bottom of a div

I've attached some fairly simple markup.

I need the images to snap to the bottom of the div. Right now they snap to the top.  My efforts to resolve this have not gone well. Any help with this is appreciated.
ee.html
Avatar of Kim Walker
Kim Walker
Flag of United States of America image

img position is controlled with the vertical-align property. In fact, it's one of the few elements that are. img elements are inline elements; they behave just like text characters. The default vertical-align value is baseline. This means that they have a descender and ascender just like the letter g or y. The ascender height matches the height of the img, but the descender height is based on the calculated line-height for the parent element. In order to eliminate the descender space, you need to change the vertical-align to either top or bottom. Or in your case, since you have not assigned any properties to your img, you would need to add it to your existing CSS.
.flower-pot img {
	vertical-align: bottom;
}

Open in new window

As a side note, relative is the default value for the position property and zero is the default value for all four position direction properties (left, right, bottom, and top). So position: relative; left: 0; bottom: 0; is unnecessary. The only time position: relative; is useful without a great-than-zero value for at least one of the four position directions is when you want to establish the origin of positioning for descendant elements.
Avatar of Larry Vollmer
Larry Vollmer

ASKER

This was a solution I tried that I thought would work, but it did not

https://www.dropbox.com/s/k41gyfrbbh5r9td/Screenshot%202016-08-03%2008.38.39.png?dl=0
the float-right is what seems to be causing the issue. It somehow breaks the vertical alignment
ASKER CERTIFIED SOLUTION
Avatar of Kim Walker
Kim Walker
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
thank you