Example table style CSS layouts

These examples are associated with the article: CSS tables verses layout tables.

Typical CSS boxes (Example 1)

First example shows a fairly typical CSS version of creating content area boxes, adapted from Nomensa.com. Under most circumstances it looks fine, but even slight increases in text (or even just a long word) can 'break' the effect (narrow the window or increase your font if it looks fine).

First box

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam et eros.

Link 1

Second box

Nam nulla mi, vestibulum non, feugiat vulputate, volutpat id, sapien. Lorem ipsum Nam nulla mi.

Link 2

Third Box

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam et eros.

Link 3

Fourth Box

Short line.

Link 4
 

The HTML code used for this is:

<div class="row">
	<div class="box">
		<h2>First box</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam et eros.</p>
		<a href="#">Link 1</a>
	</div>
	<div class="box">
		<h2>Second box</h2>
		<p>Nam nulla mi, vestibulum non, feugiat vulputate, volutpat id, sapien. Lorem ipsum Nam nulla mi.</p>
		<a href="#">Link 2</a>
	</div>
</div><!-- end row -->

<div class="row">
	<div class="box">
		<h2>Third Box</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam et eros.</p>
		<a href="#">Link 3</a>
	</div>
	<div class="box">
		<h2>Fourth Box</h2>
		<p>Short line.</p>
		<a href="#">Link 4</a>
	</div>
</div><!-- end row -->
<div class="cl">&nbsp;</div>

The CSS simly floats the box class left with a width of 48%, gives it a minimum height (including IE<6 work around), and positions the link at the bottom. View source for details.

Table display properties for CSS boxes (Example 2)

The second example shows the same effect applied with the table CSS properties of table, table-row and table-cell.

First box

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam et eros.

Link 1

Second box

Nam nulla mi, vestibulum non, feugiat vulputate, volutpat id, sapien. Lorem ipsum Nam nulla mi.

Link 2

Third Box

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam et eros.

Link 3

Fourth Box

Short line.

Link 4
 

The HTML code is the same as example 1, except a wrapper (#example2) is added to act as a 'table' tag. The essential CSS used is:

#example2 {
display: table;
border-spacing: 10px;
}

.row {
display: table-row;
}

.box {
display: table-cell;
padding: 0 0 1.5em 0;
border: 1px #000 solid;
width: 49%;
}