jmarioneaux
New Member
I have a site where I have \[code\]<div>\[/code\]s that expand to contain images and a title. What I have done so far is create a hierarchy like this:\[code\]<div class="thumb"> <img src="http://stackoverflow.com/questions/15668090/image_url"/> <div id="title">title</div></div>\[/code\]then positioned the title like this:\[code\]#title{ position: absolute; bottom: 0; left: 0;}\[/code\]but the title \[code\]<div>\[/code\] sits below the bottom line of the image. I tried to reduce the \[code\]line-height\[/code\] in the div and that fixed the problem of the text hanging over the image but messed up the text padding. Does anybody know how I should be doing things differently to position the title at the bottom right of the image in the 'correct' way?Here's a jsfiddle of the problem:http://jsfiddle.net/BUpmr/3