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).
Second box
Nam nulla mi, vestibulum non, feugiat vulputate, volutpat id, sapien. Lorem ipsum Nam nulla mi.
Link 2The 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"> </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
.
Second box
Nam nulla mi, vestibulum non, feugiat vulputate, volutpat id, sapien. Lorem ipsum Nam nulla mi.
Link 2The 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%; }