Table-less layouts

The div tag

Div tags can be used to add order to your HTML documents, but can also be used to control the layout. One of the most useful features of div tags is that they are ‘presentation less’ meaning they do not interfere with the presentation of the document unless they have styles applied to them. This property will be used to create the simple layouts in the rest of the tutorial.

Basic row layouts

The most basic layout is one in which the content is simply separated by rows.

<div>Start</div>
<div>Middle</div>
<div>End</div>

These elements will automatically be displayed on separate rows as the div tag is a block level element, all that remains is to add some styles to the elements to give the content better presentation.

div
{
   padding 4px;
}

This example shows a simple style applied to the element to add some padding between the elements.

Adding columns

Now that a basic layout has been produced we can add columns.

<div>Start</div>
   <div>
      <div>Middle left content</div>
      <div>Middle right content</div>
   </div>
<div>End</div>

This simple example demonstrates how to add a 2 column layout to the existing structure.

.column
{
   float: left;
   width: 50%;
}

More complicated layouts

The basic principles above can be re-applied to create more complicated layouts. Start by sketching boxes that represent the layout you are trying to achieve and then work out how to achieve it using rows or columns using div tags.