Equal height (pure CSS)

Purpose

Equalize the height of elements on the same baseline.

Example

Short container 1

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 1

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 1

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.

Short container 2

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

Medium container 2

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

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

Code

HTML

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

	<div class="row wb-eqht-grd">
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Short container 1</h3>
				...
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Medium container 1</h3>
				...
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Long container 1</h3>
				...
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Short container 2</h3>
				...
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Medium container 2</h3>
				...
			</section>
		</div>
	</div>
</section>

SCSS

#simple, #grow {
	.wb-eqht-grd {
		section {
			border: 1px solid #ddd;
			border-radius: 4px;
			margin-bottom: 23px;
			padding: 10px;
		}
	}
}

Grow Example

Note: The last row will always divide your columns proportionately in order to fill the full width.

Short container 1

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 1

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 1

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.

Short container 2

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

Medium container 2

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

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

Code

HTML

<section id="grow">
	<h2>Grow Example</h2>

	<div class="row wb-eqht-grd grow">
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Short container 1</h3>
				...
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Medium container 1</h3>
				...
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Long container 1</h3>
				...
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Short container 2</h3>
				...
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Medium container 2</h3>
				...
			</section>
		</div>
	</div>
</section>

SCSS

#simple, #grow {
	.wb-eqht-grd {
		section {
			border: 1px solid #ddd;
			border-radius: 4px;
			margin-bottom: 23px;
			padding: 10px;
		}
	}
}

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 4

Column 4

  • test
  • test
  • test
  • test
  • test

Code

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

	<div class="row wb-eqht-grd">
		<div class="col-sm-6 col-md-3">
			<div class="parent-example hght-inhrt">
				<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>

		<div class="col-sm-6 col-md-3">
			<div class="parent-example hght-inhrt">
				<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>

		<div class="col-sm-6 col-md-3">
			<div class="parent-example hght-inhrt">
				<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>

		<div class="col-sm-6 col-md-3">
			<div class="parent-example hght-inhrt">
				<section class="panel panel-default hght-inhrt">
					<div class="panel-heading">
						<h3 class="panel-title">Column 4</h3>
					</div>
					<div class="panel-body">
						<p>Column 4</p>
						...
					</div>
				</section>
			</div>
		</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-grd) whereas eqht-trgt is only applied to the element to equalize (nothing needs to be done about the parents). This version uses Javascript.

Column 1

Column 1

  • test
  • test
  • test
  • test
  • test

Panel footer

Column 2

Column 2

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

Panel footer

Column 3

Column 3

  • test
  • test

Panel footer

Code

<section>
	<h2>Targeting a deeper nested elements</h2>

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

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

		<div class="col-sm-12 col-md-4">
			<div class="well well-lg">
				<section class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">Column 3</h3>
					</div>
					<div class="panel-body eqht-trgt">
						<p>Column 3</p>
						...
					</div>
					<footer class="panel-footer">
						<p class="mrgn-tp-sm mrgn-bttm-sm">Panel footer</p>
					</footer>
				</section>
			</div>
		</div>
	</div>
</section>
Date modified: