A Simple Two-Column Layout

In the first example, I introduce a very common layout; it contains a narrow left column for navigation and a right column that houses the rest of the page's content. In this example, the navigation column is a fixed width, but the content area is fluid—that is, it changes width depending on the width of the browser window.

In all of these examples, I do things in the most simple way to make the point, and often choose a different color for the backgrounds of each element. This allows you to see the location of these elements without adding to their sizes by using borders. So although these might not look too pretty, they do clearly illustrate what I am trying to show you. We'll get to the aesthetics later.