Why does display:table put a gap between absolutely positioned div tags and can it be fixed?

Question

I have three div tags that are absolutely positioned by percentage. The three div tags sit vertically in a column, top middle and bottom with width:100%. The middle div tag has display:table, which causes a small gap to appear depending on the window size if and only if there are other elements inside the middle div tag. Is there some extra CSS I need to use to get the display:table to stop generating a gap?

Here's a link to the fiddle: [https://jsfiddle.net/3x1k3d8u/]

Here's the layout of the divs:

<body>
  <div id="top">
  </div>
  <div id="middle">
    <div id="problem">
    </div>
  </div>
  <div id="bottom">
  </div>
</body>

Here's the CSS:

body{
  background-color:#f00000;
}
#top {
  background-color: #303030;
  display: table-cell;
  height: 37.5%;
  left: 0%;
  position: absolute;
  top: 0%;
  width: 100%;
}
#middle{
 background-color:#383838;
 display:table;
 height:25%;
 left:0%;
 position:absolute;
 top:37.5%;
 width:100%;
}
#problem{
  /*display:none;*/
}
#bottom {
  background-color: #404040;
  display: table-cell;
  height: 37.5%;
  left: 0%;
  position: absolute;
  top: 62.5%;
  width: 100%;
}

To recreate the problem, run the fiddle and adjust the height of the window. You should see a thin horizontal line of red appear between the middle and bottom div tags. This line disappears if you change the display:table on the middle div tag or totally remove the elements inside the middle div tag.

You're missing a semi-colon on line 3 of your CSS after height:100%. When I fix that it appears fine in Safari 9.0.1. Is there a particular browser you're seeing this issue in? — Josh Rutherford
There was a lot more to the problem. I updated the question to show the actual issue which is with a div using display:table that creates a gap between div tags when it has another div inside it. — Frank

LucaLumetti LucaLumetti · Accepted Answer · 2015-12-23T21:46:11

You miss a semicolon at line 3 of css file.

#container {
  display: table;
  height: 100% width: 100%;
}

to

#container {
  display: table;
  height: 100%;
  width: 100%;
}

Why does display:table put a gap between absolutely positioned div tags and can it be fixed?

1 Answers