Shihan Shihan - 2 years ago 90
HTML Question

HTML image bottom alignment inside DIV container

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 id="navigationContainer">
<!-- navigation stuff -->

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?

Answer Source

This is your code:

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:

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:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download