Why does the text on this third column is pushed down? - html

Question

Well, I coded this page, but I got stuck at why does the third column is pushing down my text (or other elements). It uses the same style from the first box, but while the first box is ok, the third one is pushing the elements down by some pixels.
Like this:
HTML
<div id="contentWrapper">
<div id="sideBar">
<div class="sidebarBox"></div>
<div class="sidebarContent">
<h4>
Índice
</h4>
<ul class="tree">
<li>
Sinopse
</li>
<li>
Tropas
</li>
<li>
Geladeira
<ul>
<li>
Lógica
</li>
<li>
Gênio
</li>
<li class="last">
Horror
</li>
</ul>
</li>
<li>
Notas
</li>
<li>
Mídia
</li>
<li class="last">
Referências
</li>
</ul>
</div>
</div>
<div id="mainBody"></div>
<div id="infoBar">
<div class="sidebarBox"></div>3º Column
</div>
</div>
CSS
* {
margin:0;
padding:0;
font:normal normal 14px/20px Helvetica,Arial,sans-serif
}
h4 {
font-size:14px;
font-weight:700;
text-transform:uppercase;
padding-top:10px;
border-bottom:2px solid #2a558c;
margin-bottom:10px
}
#contentWrapper {
display:table;
border-spacing:0;
width:100%;
height:500px
}
#contentWrapper > div {
display:table-cell
}
#sideBar {
background-color:#E4E5DD;
width:200px
}
#mainBody {
background-color:#EEEEE6
}
#infoBar {
background-color:#e4e5dd;
width:200px
}
#footer {
background-color:#323540;
height:50px
}
.sidebarBox {
background-color:#323540;
height:30px;
width:100%
}
.sidebarContent {
padding:15px
}
I messed a lot with the Firebug and even tried to open it in IE and Chrome, with same results. Both columns use the same CSS, and this difference is freaking me out. I thought about "fixing" it with some negative margins, but I want to understand the problem first, insted of "workahacking" away.
Thanks a lot in advance!

Answer 1

Add vertical-align: top to #contentWrapper > div. Currently it is baseline.
Have a fiddle!
CSS
#contentWrapper > div {
display: table-cell;
vertical-align: top;
}
Without vertical-align: top, the div is basing its vertical alignment on .sidebarContent which has 15px of padding. This is resulting in the 15px gap.

Answer 2

Change the following and it should fix your problem. I've found that when using display:table-cell it always mis-aligns the last cell unless I specifically give it a vertical alignment
#contentWrapper > div {
display: table-cell;
vertical-align:top;
}
Example

Answer 3

Add display:inline-block to this class:
.sidebarBox {
background-color: #323540;
height: 30px;
width: 100%;
display: inline-block;/*Add this*/
}
fiddle

Answer 4

.sidebarBox {
float:right;
}
will work.