How to place the text after thumbnails at the bottom? - html

Question

I have a thumbnails div:
How to place the selected div at the bottom?
Like so:
http://jsfiddle.net/jJzu5/
html:
<td>
<div class="thumbnail">
<img class="thumbnail" src="abc.jpg">
</div>
</td>
<td>
<div class="thumbnail">
<img class="thumbnail" src="def.jpg">
</div>
</td>
<td>
<div class="thumbnail">
<img class="thumbnail" src="ghk.jpg">
</div>
</td>
<td>
<div>
... // <-- this has to be at the bottom
</div>
</td>
css:
div.thumbnail {
width: 40px;
height: 40px;
margin-right: 10px;
position: relative;
float: left;
border: 1px #aaa solid;
}
img.thumbnail {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-height: 90%;
max-width: 90%;
}
Update:
please look into the jsfiddle-link: http://jsfiddle.net/jJzu5/
vertical-align doesn't work there.
Update2:
uploaded a desired look (at the top)

Answer 1

Sorry, now that I understand what you mean. You just need to add a wrapper with display: table and then set the text div to display: table-cell and it should behave how you want:
div.wrapper { display: table;
}
div.downloads_thumbnail {
width: 50px;
height: 50px;
border: 3px #000 solid;
position: relative;
float: left;
}
div.thumbText {
display: table-cell;
vertical-align: bottom;
}
img.downloads_thumbnail {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-height: 50px;
max-width: 50px;
}
and
<div class="wrapper">
<div class="downloads_thumbnail">
<img class="downloads_thumbnail" src="http://bower.io/img/bower-logo.png">
</div>
<div class="downloads_thumbnail">
<img class="downloads_thumbnail" src="http://bower.io/img/bower-logo.png">
</div>
<div class="downloads_thumbnail">
<img class="downloads_thumbnail" src="http://bower.io/img/bower-logo.png">
</div>
<div class="downloads_thumbnail">
<img class="downloads_thumbnail" src="http://bower.io/img/bower-logo.png">
</div>
<div class="thumbText">
...
</div>
</div>
http://jsfiddle.net/thespacebean/jJzu5/3/

Answer 2

Try the css:
vertical-align: bottom;
Docs: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

Answer 3

Are you using <tr> elements? If not, wrap your existing <td> elements in a <tr>. Then start a new <tr> and place your "selected div" in a <td> within it. It will start a new table row and appear below your existing markup.

Answer 4

Have you tried using margin-top? I am sure that would work, if doesn't then try adding some padding. So the text should come at the bottom.
In your fiddle the problem is, that the div with the images is at left, so you cannot place it infront of it. You can have a look there for yourself!
Since the images provided there were so large and not in a line, I gave it a position: absolute and aligned it there. Other approach is the margin.
You are using tr so the div will be inline i.e. table row (tr). This is why it floats up there.
Jsfiddle: http://jsfiddle.net/afzaal_ahmad_zeeshan/jJzu5/2/