Horizontally align div with display: table-cell

Question

I have a table with bars in it. I use display: table-cell in order to align the contents at the bottom. The problem is that the container divs no longer align horizontally over their corresponding THs (their width is not set)

Here is a jsFiddle that shows the problem

Answer 1

The Problem

The problem when using the table-cell-attribute is that it behaves like "a real table cell" and no more like a block- or inline-element. When the parent elements table-rowand table are missing they are generated anonymously. So the box will loose all the things like margin.

You can read more about this here: "Tables in the visual formatting model"

---

I rebuild your HTML structure a little and this seems to work fine:

DEMO

http://jsfiddle.net/insertusernamehere/XPSQG/

CSS

<style>

    #graph th {
        background:         red;
    }

    #graph td {
        min-width:          30px;
        margin:             0;
        padding:            0;
        color:              #222222;
    }

    #graph div {
        display:            block;
        position:           relative;
        margin:             0 auto;
        width:              30px;
        max-width:          30px;
        height:             100px;
        background-color:   #EFEFEF;
        border:             1px solid #000000;
    }

    #graph span {
        position:           absolute;
        left:               0;
        top:                -20px;
        width:              100%;
        color:              #222222;
        font-size:          16px;
        line-height:        16px;
        text-align:         center;
    }

    #graph p.color {
        position:           absolute;
        right:              0;
        bottom:             0px;
        width:              100%;
        margin:             0;
        color:              #222222;
    }

    #graph p.color.c1 {
        background:         #0f0;
    }

    #graph p.color.c2 {
        background:         blue;
    }​

</style>

HTMl

<div id="graph">
    <table>
        <tr>
            <td><div><p class="color c1" style="height:20px;"><span>1</span></p></div></td>
            <td><div><p class="color c2" style="height:30%;"><span>2</span></p></div></td>
            <td><div><p class="color c1" style="height:40%;"><span>3</span></p></div></td>
            <td><div><p class="color c2" style="height:50%;"><span>4</span></p></div></td>
        </tr>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>Some long value</th>
        </tr>
    </table>
</div>

How it works

It basically places the content (green percentage <p>-tags) of the columns on the bottom. To have the numbers on top of that you can easily place them within the <p>-tag and them "move them out" again. This is done by this part:

top:                -20px;
font-size:          16px;
line-height:        16px;

This says that the line-height and the font size are 16px. It would be enough to set top: -16px to move it out completely - the additional 4px add a nice padding. :)

Hope you get the idea.

Note

Somewhere you used this attribute:

countunit="0_1_0"

As this is not valid HTML please use the data-prefix:

data-countunit="0_1_0"

This is valid HTML5 and it also won't cause any trouble in older browsers.