Using CSS display: table-cell; layout Problem

I am looking for help in solving a problem encountered in using the approach described in Sitepoint’s “Everything You Know About CSS Is Wrong”. Using a simple three column layout, I find that within a row the distance from the top of the cells to the first cell entry is controlled by the entry with the largest top margin. The goal is to have the tops of the backgrounds of the heads in the three columns align.

You can see the problem at:


went through it very fast, but i see that the divs nav and aside have a top margin where middle doesn’t. You could start by doing something about that

I looked at the margins based on your suggestion and do not see any. I had checked this before and specified the margin in the embedded css to override the linked css style sheet for the nav and aside elements. When I look at the elements with Firebug it does not show any specified top margin.

Strange, I’m sure I saw top margins for the two sidebars. Problem now is though, that your site isn’t opening any longer, so it very hard to check!

My site shows up on my various browsers and includes the changes that i made last night. Do not understand why you are not able to open it.

You can do that by setting the vertical-align property to top.

section {
    display: table-cell;
    float: none;
    width: 585px;
    margin: 0 0 30px 0;
    padding: 0 15px 0 0;
    text-align: left;
    border-left: 1px solid #999991;/*--40%--*/

Thanks, Adding vertical-align: top; did solve the problem. I thought I had tried that but I guess not.

It is interesting to me that the code is only needed in the nav and aside elements and not the section or footer elements that seem to me are similar. Do you have any idea why it is needed some times and not others?