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: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula mauris ipsum, nec facilisis sem eleifend eu. Donec fringilla dapibus massa ut tristique. In id nulla at purus vehicula vehicula. Morbi lacinia odio ut nulla euismod sagittis. Mauris interdum eu nibh in tincidunt. Praesent non tincidunt risus, et malesuada est. Mauris nisl nunc, pharetra sed dapibus vel, iaculis vitae lorem.

Medium container

Example text: In eget diam ac lectus consectetur accumsan et quis turpis. Nam vitae vulputate odio, vel posuere nunc. Mauris at pharetra lorem, ac commodo neque. Integer adipiscing luctus orci eu aliquet. Phasellus fermentum accumsan augue at dignissim. Proin malesuada leo quis ante ornare, vitae pellentesque lorem vulputate. Fusce fermentum, nibh sit amet interdum luctus, sapien magna tristique orci, in ultrices turpis mi lacinia quam. Etiam gravida velit id tempor vulputate. Maecenas aliquet pulvinar viverra. Quisque luctus viverra sem ut suscipit. Suspendisse et mi justo.

Long container

Example text: Vivamus felis erat, lobortis vel justo eu, blandit aliquam arcu. Nunc tempus dictum magna id consequat. Morbi sodales mi et ligula congue aliquet. Mauris sapien nibh, porta a interdum quis, vehicula eu nunc. Sed semper in mi sit amet vehicula. Maecenas placerat suscipit eleifend. Proin diam justo, vulputate ut hendrerit sit amet, faucibus non urna. Nulla placerat, quam ut vulputate faucibus, odio erat fermentum nisl, vitae tempus lectus orci vitae leo. Praesent cursus tellus nec mi fringilla, eu euismod quam egestas. Proin dolor dui, luctus a nibh id, accumsan vehicula metus. Cras venenatis felis vitae magna cursus, ut fringilla tortor imperdiet. Curabitur dictum posuere sem, a luctus turpis ultrices ac. Morbi semper consectetur massa in fringilla. Nulla ipsum tellus, dictum a commodo vel, sodales pulvinar eros. Donec mollis sapien a nunc lacinia, eu porta enim eleifend. Vivamus non feugiat felis, in sodales tellus.

Short container

Example text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula mauris ipsum, nec facilisis sem eleifend eu. Donec fringilla dapibus massa ut tristique. In id nulla at purus vehicula vehicula. Morbi lacinia odio ut nulla euismod sagittis. Mauris interdum eu nibh in tincidunt. Praesent non tincidunt risus, et malesuada est. Mauris nisl nunc, pharetra sed dapibus vel, iaculis vitae lorem.

Medium container

Example text: In eget diam ac lectus consectetur accumsan et quis turpis. Nam vitae vulputate odio, vel posuere nunc. Mauris at pharetra lorem, ac commodo neque. Integer adipiscing luctus orci eu aliquet. Phasellus fermentum accumsan augue at dignissim. Proin malesuada leo quis ante ornare, vitae pellentesque lorem vulputate. Fusce fermentum, nibh sit amet interdum luctus, sapien magna tristique orci, in ultrices turpis mi lacinia quam. Etiam gravida velit id tempor vulputate. Maecenas aliquet pulvinar viverra. Quisque luctus viverra sem ut suscipit. Suspendisse et mi justo.

Long container

Example text: Vivamus felis erat, lobortis vel justo eu, blandit aliquam arcu. Nunc tempus dictum magna id consequat. Morbi sodales mi et ligula congue aliquet. Mauris sapien nibh, porta a interdum quis, vehicula eu nunc. Sed semper in mi sit amet vehicula. Maecenas placerat suscipit eleifend. Proin diam justo, vulputate ut hendrerit sit amet, faucibus non urna. Nulla placerat, quam ut vulputate faucibus, odio erat fermentum nisl, vitae tempus lectus orci vitae leo. Praesent cursus tellus nec mi fringilla, eu euismod quam egestas. Proin dolor dui, luctus a nibh id, accumsan vehicula metus. Cras venenatis felis vitae magna cursus, ut fringilla tortor imperdiet. Curabitur dictum posuere sem, a luctus turpis ultrices ac. Morbi semper consectetur massa in fringilla. Nulla ipsum tellus, dictum a commodo vel, sodales pulvinar eros. Donec mollis sapien a nunc lacinia, eu porta enim eleifend. Vivamus non feugiat felis, in sodales tellus.

Short container

Example text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula mauris ipsum, nec facilisis sem eleifend eu. Donec fringilla dapibus massa ut tristique. In id nulla at purus vehicula vehicula. Morbi lacinia odio ut nulla euismod sagittis. Mauris interdum eu nibh in tincidunt. Praesent non tincidunt risus, et malesuada est. Mauris nisl nunc, pharetra sed dapibus vel, iaculis vitae lorem.

Medium container

Example text: In eget diam ac lectus consectetur accumsan et quis turpis. Nam vitae vulputate odio, vel posuere nunc. Mauris at pharetra lorem, ac commodo neque. Integer adipiscing luctus orci eu aliquet. Phasellus fermentum accumsan augue at dignissim. Proin malesuada leo quis ante ornare, vitae pellentesque lorem vulputate. Fusce fermentum, nibh sit amet interdum luctus, sapien magna tristique orci, in ultrices turpis mi lacinia quam. Etiam gravida velit id tempor vulputate. Maecenas aliquet pulvinar viverra. Quisque luctus viverra sem ut suscipit. Suspendisse et mi justo.

Long container

Example text: Vivamus felis erat, lobortis vel justo eu, blandit aliquam arcu. Nunc tempus dictum magna id consequat. Morbi sodales mi et ligula congue aliquet. Mauris sapien nibh, porta a interdum quis, vehicula eu nunc. Sed semper in mi sit amet vehicula. Maecenas placerat suscipit eleifend. Proin diam justo, vulputate ut hendrerit sit amet, faucibus non urna. Nulla placerat, quam ut vulputate faucibus, odio erat fermentum nisl, vitae tempus lectus orci vitae leo. Praesent cursus tellus nec mi fringilla, eu euismod quam egestas. Proin dolor dui, luctus a nibh id, accumsan vehicula metus. Cras venenatis felis vitae magna cursus, ut fringilla tortor imperdiet. Curabitur dictum posuere sem, a luctus turpis ultrices ac. Morbi semper consectetur massa in fringilla. Nulla ipsum tellus, dictum a commodo vel, sodales pulvinar eros. Donec mollis sapien a nunc lacinia, eu porta enim eleifend. Vivamus non feugiat felis, in sodales tellus.

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%;
	}
}
Date modified: