Home/ Questions/Q 7024291
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T23:49:17+00:00

As shown in the example above, I’m trying to create a grid of boxes/cells.

  • 0

Example screenshot

As shown in the example above, I’m trying to create a grid of boxes/cells. I want it to look nicer than the screenshot, and I want the bottom of each cell extend down to align with the bottom of the tallest cell in the row. I know there are about a millions posts to solve 100% height problems but none of them seem to work for this case.

Requirements:

  • No background images
  • No javascript
  • Must work with the following Doctype: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> (Drupal 7)
  • But, I’m very flexible with the markup and CSS, for example, I’m fine with adding extra clear divs or even re-doing the whole thing with tables.

Here’s the code I used to make the screenshot above:

HTML:

<div class="row">
  <div class="cell">Here is a grid of several cells. We want each cell to extend down to the bottom of the row.</div>
  <div class="cell">This cell it too short. </div>
</div>
<div class="row">
  <div class="cell">This cell should extend down to the bottom.</div>
  <div class="cell">We don't want to use background images or javascript. But the markup and CSS can be made however is best. Each row should contain cells of equal size.</div>
</div>

CSS:

.row {
  clear: both;
}

.cell {
  background: #CCC;
  border-radius: 10px;
  border: 2px solid #AAA;
  float: left;
  margin: 5px;
  padding: 5px;
  width: 200px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s what did it for me…

    enter image description here

    HTML:

    <table><tbody>
  <tr>
    <td>Here is a grid of several cells. We want each cell to extend down to the bottom of the row.</td>
    <td>This cell it too short. </td>
  </tr>
  <tr>
    <td>This cell should extend down to the bottom.</td>
    <td>We don't want to use background images or javascript. But the markup and CSS can be made however is best. Each row should contain cells of equal size.</td>
  </tr>
</tbody></table>

    CSS:

    table {
  border-spacing: 10px;
  margin: -10px;
  border-collapse: separate;
}

td {
  background: #CCC;
  vertical-align: top;
  border-radius: 10px;
  border: 2px solid #AAA;
  display: table-cell;
  padding: 5px;
  width: 200px;
}
    • 0