60

I have a div tag with a fixed height. Most of the images have the same height and width.

I want to align the images at the bottom of the div so that they are nicely arranged. Here is what I have so far:

<div id="randomContainer"> <div id="imageContainer"> <img src="1.png" alt=""/> <img src="2.png" alt=""/> <img src="3.png" alt=""/> <img src="4.png" alt=""/> </div> <div id="navigationContainer"> <!-- navigation stuff --> </div> </div>

The CSS looks like:

div#imageContainer { height: 160px; vertical-align: bottom; display: table-cell; }

I managed to align the images at the bottom with display: table-cell and the vertical-align: bottom css attributes.

Is there a cleaner way as displaying the div as table-cell and aligning the images at the bottom of the DIV tag?

Improve this question

4 Answers 4

Reset to default
68

Set the parent div as position:relative and the inner element to position:absolute; bottom:0

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This only works if you set the height of the container.
54

This is your code: http://jsfiddle.net/WSFnX/

Using display: table-cell is fine, provided that you're aware that it won't work in IE6/7. Other than that, it's safe: Is there a disadvantage of using `display:table-cell`on divs?

To fix the space at the bottom, add vertical-align: bottom to the actual imgs:

http://jsfiddle.net/WSFnX/1/

Removing the space between the images boils down to this: bikeshedding CSS3 property alternative?

So, here's a demo with the whitespace removed in your HTML: http://jsfiddle.net/WSFnX/4/

Improve this answer

Comments

28

Flexboxes can accomplish this by using align-items: flex-end; with display: flex; or display: inline-flex;

div#imageContainer { height: 160px; align-items: flex-end; display: flex; /* This is the default value, so you only need to explicitly set it if it's already being set to something else elsewhere. */ /*flex-direction: row;*/ }

JSFiddle example

CSS-Tricks has a good guide for flexboxes

Improve this answer

7 Comments

I think you don't need the flex-direction: column; part; works well for me!
Since you changed the flex-direction from the default of row to column, the align-items property now acts to align the children HORIZONTALLY. You should either remove flex-direction property from the above code OR change align-items to justify-content
Somehow this answer is messed up: the once existing flex-direction: column; never works but had to be flex-direction: row; and the example on jsfiddle never includes the flex-properties but display: table-cell. Nevertheless this answer solved my issue, therefore up-vote.
Stange @David, thanks for pointing that out. Looks like JSFiddle forgot my actual fiddle, then someone clicked on the link and created another fiddle overwriting mine? I'll update the JSFiddle.
Also note @David, flex-direction: row; is the default value, so unless some other css sets it, you can leave it blank and it'll behave as flex-direction: row;.
|
10

<div> with some proportions

div { position: relative; width: 100%; height: 100%; }

<img>'s with their own proportions

img { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: auto; /* to keep proportions */ height: auto; /* to keep proportions */ max-width: 100%; /* not to stand out from div */ max-height: 100%; /* not to stand out from div */ margin: auto auto 0; /* position to bottom and center */ }
Improve this answer

1 Comment

This solution is regrettable very error-prone when the width of the outer container / viewport is changing.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.