HTML/CSS - Mysterious Top Padding that doesn’t go away

I am making a column layout with CSS, and it is coming along swimmingly. Surprisingly enough my question is not about how to make the columns work; That is functioning. But I am instead getting an eerie mysterious “padding” at the top of my columns that is pushing down content. I have prepared an example here :


<div id="top"></div>
  <div id="main">
  <div id="left">
    <div>menu items</div>
  <div id="center">
    <h3>Not at the Top!</h3>

  <div id="right">
    <header>Right Top</header>
    <article>Right Body</article>

and here is the relevant CSS:

#top {
  background-color: #25282b;
  height: 64px;
#main {
  width: 100%;
  display: table;
#left, #center, #right {
  display: table-cell;
  margin: 0px;
#left {
  width: 150px;
  background-color: rgba(38, 46, 51, 1);
  color: #7d8285;
#left div:first-child {
  padding-top: 10px;
#center {
  width: 228px;
  background-color: rgba(57, 65, 71, 1);
  color: #999ea1;
#center div:first-child {
  padding: 15px;
#center div:first-child h3 {
  color: #fff;
  margin-bottom: 2px;
#right {
  background-color: rgba(255, 255, 255, 1);
#right header {
  background-color: #3e7aa5;
  height: 92px;
#right article {
  padding: 10px;
  background-color: #fff;

I’m really not certain what is causing it. The second column just gets outright pushed down a bit, and then the third one gets pushed down as well, regardless of the rules I specify.


Given that #right is a table-cell element, you could add vertical-align:top to it in order to solve this. For what it’s worth, this wasn’t padding, it’s just the way these elements are rendered as the default behavior is to align to the default value baseline.


#right {
  background-color: rgba(255, 255, 255, 1);
  vertical-align: top;