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

	

	    

	    	
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius nisl et scelerisque volutpat. In id eros a elit tempus pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent in justo sed risus pulvinar porta id eu libero. Nullam gravida volutpat rhoncus. Vivamus lobortis gravida mauris, id bibendum libero luctus quis. Suspendisse vehicula mauris sed justo tempus dapibus. Quisque ullamcorper vehicula elementum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas varius eros metus. Nam cursus at augue feugiat convallis. Pellentesque pretium dolor sed ex ultricies blandit. Suspendisse in leo mollis, pretium risus et, molestie felis.
	    	
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
	    	
Duis auctor ex sed enim sollicitudin lobortis. Mauris a convallis turpis, sit amet tincidunt odio. Proin vehicula maximus suscipit. Etiam at imperdiet libero. Quisque consectetur arcu magna, a egestas mauris fermentum vel. Integer feugiat sollicitudin tempor. Cras eget tempor mauris, et convallis tellus. Curabitur condimentum turpis eget hendrerit mattis. Vivamus eu erat augue.
        
Duis auctor ex sed enim sollicitudin lobortis. Mauris a convallis turpis, sit amet tincidunt odio. Proin vehicula maximus suscipit. Etiam at imperdiet libero. Quisque consectetur arcu magna, a egestas mauris fermentum vel. Integer feugiat sollicitudin tempor. Cras eget tempor mauris, et convallis tellus. Curabitur condimentum turpis eget hendrerit mattis. Vivamus eu erat augue.
	    
	    

	    	
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
	    	

	    	
Integer vitae libero ac risus egestas placerat.
	    	
Vestibulum commodo felis quis tortor.
	    	
Ut aliquam sollicitudin leo.
	    	
Cras iaculis ultricies nulla.
	    	
		
		

	

CSS

.wrap {
position: relative;
}
.content, .content:before {
    width: 70%;
}
.content {
    float:left;
    padding: 0;
}
.content:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    left: 0;
    background: #f5f5f5;
}
.sidebar, .sidebar:before {
    width:30%;
}
.sidebar {
    float:left;
    padding: 0;
}
.sidebar:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    left: 70%;
    background-color: #ddd;
}
.clear {
  clear: both;
}

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

There are other ways to solve this including flexbox.