Align divs to the bottom of anothe div

Question

I have some divs floating inside another one and I want to align them to the bottom. This is the HTML:

<div class="magazinebookcase">        

    <div class="books">
    <a title="Mag1" style="height:286px;width:16px;" href="">
    </a>
    </div>
    <div class="books">
    <a title="Mag2" style="height:258px;width:48px;" href="">
    </a>
    </div>
    <div class="books">
    <a title="Mag3" style="height:252px;width:38px;" href="">
    </a>
    </div>
    <div class="books">
    <a title="Mag4" style="height:258px;width:50px;" href="">
    </a>
    </div>       
    <div class="books">
    <a title="Mag5" style="height:284px;width:14px;" href="">
    </a>
    </div>

    <div class="clearfix"></div>
</div>

And the CSS:

.magazinebookcase {
width: 100%;
padding: 3px;
vertical-align:bottom;

} 

.magazinebookcase .clearfix {
clear:both;
}

.magazinebookcase .books {
text-align:center;
float:left;
position: relative;
vertical-align:bottom;
}

.magazinebookcase a {
border: 1px solid #000;
display: block;
word-break: break-all;
}

.magazinebookcase a:hover {
background-color: #ccc;
}

I've tried many ways, changing the positions from absolutes to relatives and other things but I can't do it properly. Any help?

post your complete code here ....... – Shailender Arora Nov 05 '12 at 11:03 — Shailender Arora, Nov 05 '12 at 11:03
Sorry, I wrongly pasted It and didn't show, it's fixed. – Ikzer Nov 05 '12 at 11:08 — Ikzer, Nov 05 '12 at 11:08

score 1 · Accepted Answer · answered Nov 05 '12 at 11:17

1

You should not use tables for your layout. But the vertical alignment features are very powerful. You could do something like that:

display: table-cell;
vertical-align: bottom;

I made a jsFiddle that demonstrates how it works.

answered Nov 05 '12 at 11:17

Amberlamps

39,180
5
43
53

score 0 · Answer 2 · answered Nov 05 '12 at 11:05

CSS should be like this:

.left {
    display:block;
    position:relative;
    height:200px;
    float:left;
}

.bottom {
    position:absolute;
    bottom:0;
}

.clear {
    clear:both;
}

HTML

<div class="left">
    <div class="bottom"></div>
</div>
<div class="left">
</div>
<div class="clear"></div>

score -3 · Answer 3 · answered Nov 05 '12 at 11:05

-3

Use tables instead. It's my recommendation. On each td use valign:bottom.

answered Nov 05 '12 at 11:05

anmarti

5,045
10
55
96

Tables aren't what I need for this purpose since I need different div heights, but thanks. – Ikzer Nov 05 '12 at 11:09
@Ikzer alright. Whenever I have some issues with region alignments I use tables. – anmarti Nov 05 '12 at 11:12
@senyortoni: Here is a nice read for you: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – Amberlamps Nov 05 '12 at 11:19
@Amberlamps thank you, going to read it. I know I don't have huge html knowledges, my intentions was only try to help him that's because I don't undertand downvotes. – anmarti Nov 05 '12 at 11:29
@senyortoni: I can see that you are fairly new to Stackoverflow. People do not downvote with the intention to punish you. Do not take it that way. The community is just trying to avoid wrong answers. SO is not that typical forum where anybody can post anything they want. It is more like a Q&A. But hang in there. I personally gained a lot of experience by just regularly reading posts on this site. – Amberlamps Nov 05 '12 at 11:34

Align divs to the bottom of anothe div

3 Answers3