Unwanted extra space on table cell using css display table

HTML & CSS
1

Hi,

As you can see I have my page divided in three rows, and in the last row (the footer), I put another table with table cells. The problem is that the first table-cell force the remaining cells to move down, but I don’t know how to resolve it. Put full screen to look better. Can you help me? Thanks!

Here the link to fiddle:
jsfiddle.net/framj00/qvg39j8f/

Here is my html code:

<!DOCTYPE html>
<html lang='it'>
  <head>
    <title></title>
    <meta charset='utf-8'>
    <meta name='description' content=''>
    <meta name='keywords' content=''>
    <meta name='author' content=''>
    <style>
       html, body {
          padding: 0;
          margin: 0;
       }

       #wrap {
          display: table;
       }

       header, main, footer {
          display: table-row;
       }

       .table {
          display: table;
          table-layout: fixed;
          width: 100%;
       }

       .cell {
          display: table-cell;
       }

       p {
          padding: 0;
          margin: 0;
       }

       #squares p {
          width: 85px;
          height: 85px;
          float: left;
          text-indent: -9999em;
       }

       #square-1 { background: red; }
       #square-2 { background: blue; }
       #square-3 { background: yellow; }
       #square-4 { background: tomato; }

    </style>
  </head>
  <body>
     <div id='wrap'>
         <header>
         </header>
         <main>
         </main>
         <footer>
            <div class='table'>
               <div class='cell' id='squares'>
                  <p id='square-1'>square 1</p>
                  <p id='square-2'>square 2</p>
                  <p id='square-3'>square 3</p>
                  <p id='square-4'>square 4</p>
               </div>
               <div class='cell'>
                  <p>Title</p>
                  <p>Here some other text<span>-</span>and other text here</p>
                  <p>and again, there is some other text<span>-</span>text text text<span>-</span><a href=''>and link here</a></p>
               </div>
               <div class='cell'>
                  <p><a href=''>Link 1</a></p>
                  <p><a href=''>Link 2</a></p>
                  <p><a href=''>Link 3</a></p>
               </div>
            </div>
         </footer>
      </div>
  </body>
</html>

Many thanks!

2

It’s the default vertical alignment that is keeping the other content down.

.cell {
         display: table-cell;
         vertical-align: top;
}

Should bring it to the top.
The boxes are at the top because they are floated.

2 Likes
3

Yes the default for vertical-align on html elements (other than ‘td’) is usually baseline so that’s why the text in the last cell is moved downwards. Vertical-align:top will cure it as you suggest :slight_smile: .

4

Thanks! You people make world a better place! :slight_smile:

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.