Page Title

sidecol

Basic HTML resources

maincol

The page layout consists of a header over a two-column body, with a footer at the bottom. It's a liquid layout that automatically resizes with changes in the browser window, and the major layout elements are centered on the page.

The header has an image as a background. The navbar extends under the picture to tie the left and right sides together.

The body area includes a fixed-width sidebar column on the left and a variable-width main column to the right. The footer at the bottom of the body area spans the full width of both columns.

The code

To position all those elements properly, there are separate divs for each of the layout elements (picture, navbar, sidecol, maincol, and footer) plus two wrapper divs: one (bodywrap) to enclose the sidecol, maincol, and footer divs, and another outer wrapper (master) around everything to allow for centering the layout on the page. The various divs use a combination of static, relative, and absolute positioning.

To use this template, copy and paste the html to a new page on your site. (The image won't show unless you copy that too.) Then you can change different values to see what it looks like, and you can add your own text.