Here is a hint for you: if you look properly, you will see a table of 5 columns and 2 rows, with 3 cells left empty.
For implementation, you can use 3 rows of div elements with appropriate CSS styles, in particular, the property
display
with values "table-row" and "table-cell":
https://developer.mozilla.org/en-US/docs/Web/CSS/display[
^].
[EDIT]
Here is a proof of concept for you:
<html>
<head>
<title>Table layout</title>
<style>
div { padding-left: 1em; padding-right: 1em;
padding-top: 0.4em; padding-bottom: 0.4em; }
div.menu { display: table; }
div.row { display: table-row; }
div.cell { display: table-cell;
vertical-align:middle; text-align: center;
border: solid black thin; }
</style>
</head>
<body>
<div class="menu">
<div class="row">
<div class="cell">Image 1</div>
<div class="cell"></div>
<div class="cell">Text 1</div>
<div class="cell"></div>
<div class="cell">Image 2</div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell">Image 3</div>
<div class="cell">Text 2<br/>
more text<br/>more…</div>
<div class="cell">Image 4</div>
<div class="cell"></div>
</div>
</div>
</body>
</html>
For final results, remove the borders; I added them just for demonstration. Pay attention for
vertical-align
and the fact that the content adjusts itself in both vertical and horizontal direction, depending on the size of the inner content of all cells.
—SA