I understand that you are seeking an answer that doesn’t involve HTML Tables or CSS Grid Layout. You mention that you don’t want Grid because of weak browser support.
However, around the same time you posted your question, most major browsers released new versions which provide full support for Grid Layout (see details below).
CSS Grid makes your layout simple. There is no need to alter your HTML, add nested containers or set a fixed height on the container (see my flexbox answer on this page).
#wrapper {
display: grid; /* 1 */
grid-template-columns: repeat(5, 90px); /* 2 */
grid-auto-rows: 50px; /* 3 */
grid-gap: 10px; /* 4 */
width: 516px;
}
.tall {
grid-row: 1 / 3; /* 5 */
grid-column: 2 / 3; /* 5 */
}
.wide {
grid-row: 2 / 4; /* 6 */
grid-column: 3 / 5; /* 6 */
}
.block {
background-color: red;
}
<div id="wrapper">
<div class="block"></div>
<div class="block tall"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block wide"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
jsFiddle
How it works:
- Establish a block-level grid container.
- The
grid-template-columns
property sets the width of explicitly defined columns. In this case, the grid is instructed to create a 90px width column, and repeat the process 5 times. - The
grid-auto-rows
property sets the height of automatically generated (implicit) rows. Here each row is 50px tall. - The
grid-gap
property is a shorthand forgrid-column-gap
andgrid-row-gap
. This rule sets a 10px gap between grid items. (It doesn’t apply to the area between items and the container.) - Instruct the
.tall
item to span from row lines 1 to 3 and column lines 2 to 3.* - Instruct the
.wide
item to span from row lines 2 to 4 and column lines 3 to 5.*
* In a five-column grid there are six column lines. In a three-row grid there are four row lines.
Browser Support for CSS Grid
- Chrome – full support as of March 8, 2017 (version 57)
- Firefox – full support as of March 6, 2017 (version 52)
- Safari – full support as of March 26, 2017 (version 10.1)
- Edge – full support as of October 16, 2017 (version 16)
- IE11 – no support for current spec; supports obsolete version
Here’s the complete picture: http://caniuse.com/#search=grid