CSS Equal Height

Achieving equal column height using only CSS

Unequal Height

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi.Donec sed bibendum ante.

.main, .sidebar {
	float: left;
	padding: 20px;
}
.main {
	width: 400px;
	background-color: LightSlateGrey;
}
.sidebar {
	width: 200px;
	background-color: Tomato;
}

Faux Column

.main, .sidebar {
	float: left;
	padding: 20px;
}
.container {
	background-color: Tomato;
}
.main {
	width: 400px;
	background-color: LightSlateGrey;
}
.sidebar {
	width: 200px;
}

CSS Table

.main, .sidebar {
	float: none;
	padding: 20px;
	vertical-align: top;
}
.container {
	display: table;
}
.main {
	width: 400px;
	background-color: LightSlateGrey;
	display: table-cell;
}
.sidebar {
	width: 200px;
	display: table-cell;
	background-color: Tomato;
}

Intro.js

CSS Equal Height

Unequal Height

Faux Column

CSS Table