CSS - rowspan like effect

Question

I simply want to achieve the effect where the left column has two merged rows and the one on right has none. How can I achieve this layout?

The html table will look

Answer 1

CSS

    body {
      margin: 0;
      padding: 50px;
      background-color: #FFFFFF;
      color: #000000;
      font-family: Arial, Helvetica, sans-serif;
    }
    .tablewrapper {
      position: relative;
    }
    .table {
      display: table;
    }
    .row {
      display: table-row;
    }
    .cell {
      display: table-cell;
      border: 1px solid red;
      padding: 1em;
    }
    .cell.empty
    {
      border: none;
      width: 100px;
    }
    .cell.rowspanned {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100px;
    }

<div class="tablewrapper">
      <div class="table">
        <div class="row">
          <div class="cell">
            Top left
          </div>
          <div class="rowspanned cell">
            Center
          </div>
          <div class="cell">
            Top right
          </div>
        </div>
        <div class="row">
          <div class="cell">
            Bottom left
          </div>
          <div class="empty cell"></div>
          <div class="cell">
            Bottom right
          </div>
        </div>
      </div>
    </div>

Demo: http://www.sitepoint.com/rowspans-colspans-in-css-tables/

Answer 2

Grid layout was introduced in 2017 for exactly this purpose, and possibly much more complex ones.

In your case, you can use e.g. inline-grid + grid-template-areas:

#page {
  display: inline-grid;
  grid-template-areas: "aside main"
                       "aside foot";
}

#page > aside {
  grid-area: aside;
  background: lightgreen;
}
#page > main {
  grid-area: main;
  background: lightpink;
}
#page > footer {
  grid-area: foot;
  background: lightblue;
}

<section id="page">
  <aside>aside 1</aside>
  <main>main 2</main>
  <footer>footer 3</footer>
</section>