Equal height

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

<section id="simple">
	<h2>Example</h2>

	<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>
</section>

CSS

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

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

@media (min-width: 1200px) {
	#simple .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

Code

<section>
	<h2>Nested Example</h2>

	<div class="row wb-eqht">
		<div class="col-sm-6 col-md-3">
			<section class="panel panel-default hght-inhrt">
				<div class="panel-heading">
					<h3 class="panel-title">Column 1</h3>
				</div>
				<div class="panel-body">
					<p>Column 1</p>
					...
				</div>
			</section>
		</div>

		<div class="col-sm-6 col-md-3">
			<section class="panel panel-default hght-inhrt">
				<div class="panel-heading">
					<h3 class="panel-title">Column 2</h3>
				</div>
				<div class="panel-body">
					<p>Column 2</p>
					...
				</div>
			</section>
		</div>

		<div class="col-sm-6 col-md-3">
			<section class="panel panel-default hght-inhrt">
				<div class="panel-heading">
					<h3 class="panel-title">Column 3</h3>
				</div>
				<div class="panel-body">
					<p>Column 3</p>
					...
				</div>
			</section>
		</div>

		<div class="col-sm-6 col-md-3">
			<section class="panel panel-default hght-inhrt">
				<div class="panel-heading">
					<h3 class="panel-title">Column 1</h3>
				</div>
				<div class="panel-body">
					<p>Column 1</p>
					...
				</div>
			</section>
		</div>
	</div>
</section>

Targeting a deeper nested elements

The following example do the same as if the hght-inhrt class was applied on the element to be equalize as well as all the parents (up to the child of wb-eqht) whereas eqht-trgt is only applied to the element to equalize (nothing needs to be done about the parents).

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

Code

<div class="row wb-eqht">
		<div class="col-sm-6 col-md-4">
			<div class="well well-lg">
				<section class="panel panel-default eqht-trgt">
					<div class="panel-heading">
						<h3 class="panel-title">Column 1</h3>
					</div>
					<div class="panel-body">
						<p>Column 1</p>
						...
					</div>
				</section>
			</div>
		</div>

		<div class="col-sm-6 col-md-4">
			<div class="well well-lg">
				<section class="panel panel-default eqht-trgt">
					<div class="panel-heading">
						<h3 class="panel-title">Column 2</h3>
					</div>
					<div class="panel-body">
						<p>Column 2</p>
						...
					</div>
				</section>
			</div>
		</div>

		<div class="col-sm-12 col-md-4">
			<div class="well well-lg">
				<section class="panel panel-default eqht-trgt">
					<div class="panel-heading">
						<h3 class="panel-title">Column 3</h3>
					</div>
					<div class="panel-body">
						<p>Column 3</p>
						...
					</div>
				</section>
			</div>
		</div>
	</div>

Date modified:: 2014-09-30