padding-top for display:table-cell

Question

Here is the live link: http://whiterootmedia.com/test/test8/

I need to move the menu content down in the "content" div. Here's the opening tag with inline css:

<div id="content" style="padding-top:43px; border:solid yellow 1px;  display:table-cell; min-width:945px; height:100%;">

If I increase the padding it moves down the content in the "right_column" div.

Answer 1

The reason is that the two div elements are (in CSS sense) cells of the same row. When you increase the height of one cell, the height of the other cell increases, too. Its contents falls down, because the default vertical-align in table cells is middle.

To fix this, add the following:

#right_column {
  padding-top: 43px;
  vertical-align: top;
}