I need to create a table which is more difficult than my normal tables

Question

I am struggling with getting the long box on the left to appear next to boxes 1-9. I'm actually fine with all the colours and box shadows etc. I've been trying for hours!

I thought that CSS grids might be the answer, but some of my customers are IE11 and some are Edge.
This is what I'm trying to achieve:

https://imgur.com/6kweieJ https://i.imgur.com/6kweieJ.png?1

Hope you can help

Solution so far

<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Float four columns side by side */
.column {
  float: left;
  width: 20%;
  padding: 0 10px;
}

/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style the 9 cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  color: white;
  }
  
/* Style the top left card */
.cardtopleft {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #10069f;
    }
</style>

<div class="allboxes"> 
   <div class="row">
      <div class="column">
         <div class="cardtopleft">
            <h3> 
               <span class="ms-rteThemeForeColor-1-0">​Box top left</span></h3>​ 
            <br/></div>
      </div>
      <div class="column">
         <div class="card" style="background-color: #10069f;">
            <h3>Car​d 1<br/></h3> ​ 
            <br/></div> 
      </div> 
      <div class="column"> 
         <div class="card" style="background-color: #10069f;">
            <h3>Card 2<br/></h3>
            <br/>
         </div>
      </div>
      <div class="column">
         <div class="card" style="background-color: #10069f;">
            <h3>Card 3<br/></h3>
            <br/>
         </div>
      </div>
   </div>
   <br/>
   <div class="row">
      <div class="column">
         <div class="card" style="background-color: #10069f;"> 
            <h3>Long box<br/></h3> 
            <p> 
               <br/>&#160;</p> 
            <p> 
               <br/>&#160;<br/></p> 
            <p> 
               <br/>&#160;<br/></p> 
            <p> 
               <br/>&#160;<br/></p> 
            <p> 
               <br/>&#160;</p> 
         </div>
      </div>
      <div class="column">
         <div class="card" style="background-color: #007588;">
            <h3>Card 4<br/></h3>
            <p>Some text</p>
            <p>Some text</p>
         </div>
      </div>
      <div class="column">
         <div class="card" style="background-color: #00bfbd;">
            <h3>Card 5<br/></h3>
            <p>Some text</p>
            <p>Some text</p>
         </div>
      </div>
      <div class="column">
         <div class="card" style="background-color: #8be8df;">
            <h3>Card 6<br/></h3>
            <p>Some text</p>
            <p>Some text​​​<br/></p>
         </div>
      </div>
   </div>
   <br/>&#160;<br/>​ 
   <br/></div>

Answer 1

Here is the solution using display:flex

<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Float four columns side by side */
.column {
  float: left;
  width: 20%;
  padding: 0 10px;
}

/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px; display: flex; flex-wrap: wrap;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style the 9 cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  color: white;
  height: 100%;
    box-sizing: border-box;
  }
  
/* Style the top left card */
.cardtopleft {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #10069f;
    }
</style>

<div class="allboxes"> 
   <div class="row">
      <div class="column">
         <div class="cardtopleft">
            <h3> 
               <span class="ms-rteThemeForeColor-1-0">​Box top left</span></h3>​ 
            <br/></div>
      </div>
      <div class="column">
         <div class="card" style="background-color: #10069f;">
            <h3>Car​d 1<br/></h3> ​ 
            <br/></div> 
      </div> 
      <div class="column"> 
         <div class="card" style="background-color: #10069f;">
            <h3>Card 2<br/></h3>
            <br/>
         </div>
      </div>
      <div class="column">
         <div class="card" style="background-color: #10069f;">
            <h3>Card 3<br/></h3>
            <br/>
         </div>
      </div>
   </div>
   <br/>
   <div class="row">
      <div class="column">
         <div class="card" style="background-color: #10069f;"> 
            <h3>Long box<br/></h3> 
            <p> 
               <br/>&#160;</p> 
            <p> 
               <br/>&#160;<br/></p> 
            <p> 
               <br/>&#160;<br/></p> 
            <p> 
               <br/>&#160;<br/></p> 
            <p> 
               <br/>&#160;</p> 
         </div>
      </div>
      <div class="column">
         <div class="card" style="background-color: #007588;">
            <h3>Card 4<br/></h3>
            <p>Some text</p>
            <p>Some text</p>
         </div>
      </div>
      <div class="column">
         <div class="card" style="background-color: #00bfbd;">
            <h3>Card 5<br/></h3>
            <p>Some text</p>
            <p>Some text</p>
         </div>
      </div>
      <div class="column">
         <div class="card" style="background-color: #8be8df;">
            <h3>Card 6<br/></h3>
            <p>Some text</p>
            <p>Some text​​​<br/></p>
         </div>
      </div>
   </div>
   <br/>&#160;<br/>​ 
   <br/></div>

Answer 2

If you are able to I would use css grid. You can achieve this layout without a lot of nested html elements. I guess it depends how much this design is set in stone. So basically I have an outer grid that is using 2 columns, the first 100px wide and the other occupies the rest of the available space. The inner grid is used for boxes 1-9, and they are each using 1/3 of the available space in the parent container. The grid-gap property make it easy to space things evenly and not have to take margins into account when calculating widths.

.grid {
  display:grid;
}
.grid.outer {
  grid-template-columns: 100px 1fr;
  grid-gap: 10px;
  background:#FFFFFF;
  width:100%;
}
.box {
  padding:20px;
  color:#FFFFFF;
  background-color: pink;
  border:1px solid #666666;
  display:flex;
  align-items:center;
  justify-content:center;
}
.grid.inner {
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

<div class='grid outer'>
  <div class='box'>Header Left Box</div>
  <div class='box'>Header Box</div>
  <div class='box'>Long box</div>
  <div class='grid inner'>
    <div class='box'>Box1</div>
    <div class='box'>Box2</div>
    <div class='box'>Box3</div>
    <div class='box'>Box4</div>
    <div class='box'>Box5</div>
    <div class='box'>Box6</div>
    <div class='box'>Box7</div>
    <div class='box'>Box8</div>
    <div class='box'>Box9</div>
  </div>
</div>
  

Answer 3

Flexbox. You basically have 2 rows. The second row has a nested 4 column flexbox. Nail the "box top left" and "long box" to a fixed width size, maybe 96px or so. Then use flex: 0 1 auto on the inner boxes so they auto stretch to fill what space is left.

There's a starter playground called CSS Flexbox Please!