Typical layout

Example of a typical layout using a wrapper to contain other div tags.
Many different variations of layout can be made using this technique.

This example includes the use of a header <div>. This is the first <div> placed inside the wrapper. The style for this is:

#header {
color: #FFF;
background-color: #636;
width: 480px;
padding: 10px;
}

The significant property for this element is width. No positioning or placement values are required.

Menu and Content are floated left. The total of their widths, including padding, add up to the total width of the wrapper.

Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nulla mauris, auctor tempus rutrum non, elementum a massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tellus libero, ornare et eleifend ut, tempus vitae metus. Morbi ullamcorper rutrum nisi nec congue. Nulla nec iaculis sapien. Donec velit lorem, viverra sit amet suscipit egestas, ultrices eget ante. Donec sit amet leo velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Three column layout

Menu, Content 1 and Content 2 are all floated left. The total of their widths, including padding, add up to the total width of the wrapper.

Content 1

Content 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<< Back to main menu