O'Reilly logo

How to Design Websites by Alan Pipes

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Layout in CSS

The main building blocks used in CSS page layouts are <div> elements, or boxes, each with a unique ID so that we can identify them and give them positioning properties in the style sheet. A <div> tag has no inherent visual or structural properties, it is just an empty vessel waiting for you to give it meaning. A web page layout will typically comprise a header or banner, the main content, a navigation bar or menu, either horizontally under the banner or vertically in the left column, perhaps a sidebar in the right-hand column, and a footer (Fig 3.6). For a simple two <div> website with just a header and area for content, the HTML might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required