This is a simple example of 2 floating columns. This box is a layer, the header, columns and footer are not. Read the column text for further explanation.
TIP: Try resizing the browser window.
The CCS styles for this page are located in the <head> tag of this page, so just view the page source code to see what's going on.
This 1st column was created with 2 <div> tags. The first has this text and 10pixel padding and is nested within a second with a blue background colour, floated left and set to 49% browser window width. The reason for placing the text in a nested <div> is to allow padding to be applied which does not expand the column width to more than 99%. WARNING: Placing elements on a page that add up to 100% browser window width produces problems in IE5 Mac edition.
This 2nd column was created with 2 <div> tags. The first has this text and 10pixel padding and is nested within a second with a yellow background colour, floated left and set to 49% browser window width. The reason for placing the text in a nested <div> is to allow padding to be applied which does not expand the column width to more than 99%. WARNING: Placing elements on a page that add up to 100% browser window width produces problems in IE5 Mac edition. This 2nd column was created with 2 <div> tags. The first has this text and 10pixel padding and is nested within a second with a yellow background colour, floated left and set to 49% browser window width. The reason for placing the text in a nested <div> is to allow padding to be applied which does not expand the column width to more than 99%. WARNING: Placing elements on a page that add up to 100% browser window width produces problems in IE5 Mac edition.
This is a footnote. Like the columns above it was created with 2 <div> tags. Float of the container div is set to left. The content div has this text and the top border.