Equal Height Columns Using Pseudo Elements

We want equal height columns with background color that will span the full height. Typically we’ve used floats, but with varying content, the columns won’t be equal height.

We’re going to use Pseudo-Elements to solve this for a 2 column layout.

  • Add a wrapper div that has position: relative
  • We’ll clear floats before the closing wrapper div
  • Add :before pseudo class to our content and sidebar using absolute positioning
  • Set our background color in our :before classes
  • Use z-index = -1 in :before classes so content is on top of background color

HTML

CSS

See the Pen Equal height columns using pseudo class by Norm (@neuker) on CodePen.

There are other ways to solve this including flexbox.

Facebooktwittergoogle_pluslinkedinmail

by Norm Euker