Search code examples
htmlcssimagealignmentspacing

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>
    <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?

Solution

  • 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/