Faux Column

A quick practical sketch for the faux-columns question from @php_noob and the table suggestion from @MidiMagic.

Faux columns work by painting the column backgrounds on the outer container so inner column elements can be transparent and appear to be the same height. That is fine for fixed-width designs or when each column only needs a simple, repeating fill. It breaks down for fluid/responsive layouts, independently scrolling column content, or when each column requires its own anchored image or complex background.

A minimal faux-columns example:

/* wrapper shows the painted columns */
.container {
  width: 960px;
  margin: 0 auto;
  background: url("faux-columns.png") repeat-y top left;
  overflow: hidden; /* contains floated columns */
}
.left  { float: left; width: 240px; }
.right { margin-left: 240px; } /* or float/right as needed */

Modern alternative (preferred): use flexbox or grid — both give equal-height columns without image tricks and adapt well to responsive layouts:

.container { display: flex; align-items: stretch; }
.left { width: 240px; }
.center { flex: 1; }

Troubleshooting notes: ensure the background image aligns with your column widths; inner columns must be transparent; use clearfix or overflow to contain floats; test at different viewport sizes. Using tables for layout may “work” visually but is semantically incorrect for non-tabular content — prefer CSS table display, flexbox, or grid unless the data is truly tabular.