Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Align image to the bottom of a left-floated div

Trying to create a WEB interface for my local collection of comic books. The look'n'feel should be very similar to Apple's iBooks - book covers sittings on the bookshelves. The covers are similar but not identical in height and width. Can't figure out how to push the image covers to the bottom of the div without indicating the width of the containing div. Going with absolute-inside-relative simply stacks the covers into a pile.

HTML:

<div class="cover"><a href="#"><img src="cover1.jpg"></a></div>
<div class="cover"><a href="#"><img src="cover2.jpg"></a></div>
<div class="cover"><a href="#"><img src="cover3.jpg"></a></div>

CSS:

body {background-image: url(http://image.bayimg.com/oaddpaaea.jpg); background-repeat: repeat;}
.cover {float: left; height: 258px; border: 1px solid red; margin: 0px 5px 25px 5px;}
.cover img {border: 1px solid green; -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black;}

jsFiddle Example: http://jsfiddle.net/NATqD/

like image 539
Shurik76 Avatar asked Sep 25 '12 01:09

Shurik76


2 Answers

Try this CSS:

.cover {  float: left; height: 258px;line-height: 258px;  border: 1px solid red; margin: 0px 5px 25px 5px;}
.cover img {vertical-align: bottom; border: 1px solid green; -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black;}

You add line-height: 258px to match the height of the cover div. Then vertical-align: bottom on the images. Working example:

http://jsfiddle.net/NATqD/6/

like image 95
Fredy Avatar answered Sep 23 '22 03:09

Fredy


This seems the most straight-forward to me:

<div class="cover">
    <a href="#"><img src="http://www.emeraldinsight.com/fig/53_10_1108_S0731-9053_2009_0000024005.png"></a>
    <a href="#"><img src="http://roborfid.dyndns.org/data/book_images/backs_small/SIWE_R_GM00404130.jpg"></a>
    <a href="#"><img src="http://roborfid.dyndns.org/data/book_images/backs_small/SIWE_R_GM00624371.jpg"></a>
    <a href="#"><img src="http://www.lauren-myers.com/_img/right_arrow.jpg"></a>
    <a href="#"><img src="http://www.gotohoroscope.com/img/bg_00.gif"></a>
    <a href="#"><img src="http://roborfid.dyndns.org/data/book_images/backs_small/SIWE_R_GM00404091.jpg"></a>
    <a href="#"><img src="http://www.startplay.co.uk/images/play.png"></a>
    <a href="#"><img src="https://www.educorporatebridge.com/old_back_up_16-07-12/images/foundcourses.png"></a>
    <a href="#"><img src="http://s1.hao123.com/index/images/temple_bg.gif"></a>
</div>

.cover {
    line-height: 258px;
    height: 258px; 
    border: 1px solid red; 
    margin: 0px 5px 25px 5px;
}

http://jsfiddle.net/NATqD/5/

Works in Firefox and Chrome.

like image 26
Jared Farrish Avatar answered Sep 25 '22 03:09

Jared Farrish