What is padding in CSS

CSS Smart Box: Create Containers of Identical Height

Even if it has been out of date for a long time, it had an advantage Formatting web pages with tables in any case: the columns of a row were always the same height.

That is why it drives so many web developers crazy when they are faced with the supposed Herculean task for the first time, Arrange contents of different lengths uniformly:

Who likes it "Quick & dirty" now of course has three options:

  • Set the height of the "div" boxes to a fixed value,
  • missing blank lines with <br /> fill up or
  • Accept it and convince yourself that it is a “technical limitation”.

Either way it says: Adjeu responsive web design. Because either different screen sizes mess up the laboriously tinkered layout or an unexpected text break kills it.

But for exactly this purpose there is a simple solution with CSS! 🙂

Table-like containers with CSS

The trick is to pretend the “div” boxes used for the content are tables. Sounds strange, but it works really well.

For the realization you need a enclosing "div" box, which includes all later columns (in old terminology table called). The single ones Columns also represent "div" boxes (comparable to the columns or Cells a table).

And now comes the one hidden in our bag of tricks CSS property "display" for use:

  • With the enclosing “div” box, we set the property “display” to the value “table”,
  • and the "div" boxes in it receive the value "table-cell".

An example to illustrate this:

CSS for the header of the website ...

HTML code to generate the content ...

This is what it looks like:

Column 1 of the "CSS table"

It says something here.

It says something here.

It says something here.

And there too.

Column 2 of the "CSS table"

There is little here.

Column 3 of the "CSS table"

It says a lot here.

It says a lot here.

It says a lot here.

It says a lot here.

It says a lot here.

It says a lot here.

There is much more here.

And that's how it works:

The classes "ofa_tableContainer" and "ofa_tableContainerSpalten" define the properties on the one hand for the enclosing "div" box and on the other hand for the column boxes. In each case with the help of those already described at the beginning CSS property "display" and their values ​​"table" or "table-cell".

We have already done astonishing things with a single line of CSS: "Div" boxes that behave like tables and provide a standard-compliant basis for responsive web designs.

State of information: November 2018
Important: Please note the terms of use and legal information for this post!