CODEWITHSUNDEEP
htmlcsspositioning
Shurik76
Shurik76

Reputation: 53

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/

Upvotes: 5

Views: 1045

Answers (3)

Fredy
Fredy

Reputation: 2910

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/

Upvotes: 4

Jared Farrish
Jared Farrish

Reputation: 49188

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.

Upvotes: 1

rsoneill21
rsoneill21

Reputation: 13

Add the position: relative to the .cover this allows you to add the position: absolute to the image and thus you can position the images absolutely relative to the div.

http://jsfiddle.net/NATqD/1/

Upvotes: 0

Related Questions