Animation


DIVs vs. Tables

Float Layouts

Inline Blocks

Block Layouts


Centering

Split Bkgrd

Graphic Borders

Horizontal Lists

CSS Colors


.htaccess

Block IPs

Down for Maintenance

Page Redirect

Custom Error Pages


Escaping query strings

PNG transparency

Google App testing

Flash Optimizing

Avoid AS Statics

SEO Optimization



Use the .htaccess file

It's vital for effective site management

DIV Layouts instead of Tables

Web page layouts are best done where possible using DIV blocks defined by style sheets. Once understood, DIV formatting is easier to use than tables. One reason is because they do not require colspan and rowspan tracking which can be burdensome with frequent editing.

Tables were originally intended for showing tabular data. For example, a list of distances between cities. Browsers intended for use by the blind or other accessibility enhanced browsers can make sense from these tables. However, when tables are used for formatting, it can confuse both, the accessibility enhanced browser and the user.

Learning to user DIV tags for layouts can be difficult to do. "How to" instructions are sorely missing from the spec.

DIV layout methods

Here are 3 different methods for laying out a web page using <div> instead of tables. The most clever amongst you will enjoy combining the techniques.

Standard block layouts
box number one
box number two
display: block
Inline blocks
left
center content
right
A
B
C
display: inline-block
Using float alignments
float: left

Did you find this article userful for your website?
If so, why not provide a link to it? Just copy the following to your web page:

<a href='http://upwithabang.com/articles/css-divs-instead-of-tables.html'>DIV Layouts</a>
Share This: