Equal height

Looking for WET v3.1?

As of September 23, 2014, version 3.1 of the Web Experience Toolkit is no longer supported. The source code and documentation have been moved to the wet-boew-legacy repository.

Purpose

Equalize the height of elements on the same baseline.

Example

Short container

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Medium container

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

Long container

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.

Short container

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Medium container

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

Long container

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.

Short container

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Medium container

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

Long container

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.

Code

HTML

<div class="wb-eqht">
		<section>
			<h3>Short container</h3>
			...
		</section>
		<section>
			<h3>Medium container</h3>
			...
		</section>
		<section>
			<h3>Long container</h3>
			...
		</section>
	</div>

	<div class="wb-eqht">
		<section>
			<h3>Short container</h3>
			...
		</section>
		<section>
			<h3>Medium container</h3>
			...
		</section>
		<section>
			<h3>Long container</h3>
			...
		</section>
		<section>
			<h3>Short container</h3>
			...
		</section>
		<section>
			<h3>Medium container</h3>
			...
		</section>
		<section>
			<h3>Long container</h3>
			...
		</section>
	</div>

CSS

.wb-eqht section {
	display: inline-block;
	margin-bottom: 15px;
	padding: 15px;
	width: 100%;
}

@media (min-width: 768px) {
	.wb-eqht section {
		width: 49%;
	}
}

@media (min-width: 1200px) {
	.wb-eqht section {
		width: 33%;
	}
}

Nested Example

Column 1

Column 1

  • test
  • test
  • test
  • test
  • test

Column 2

Column 2

  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test

Column 3

Column 3

  • test
  • test

Column 1

Column 1

  • test
  • test
  • test
  • test
  • test
Date modified: