Layout 3a-Step1: 3-Column Layout Demo

This is DIV One.

This is typically the header of the page.

This is DIV Two.

This will be the left sidebar.

This will be the right sidebar.

This is DIV Three.

I have added 151px left and right margins to DIV 3. This opens up space for the sidebars. I have also added position:relative to this DIV, so that it will establish a positioning context—that will allow me to absolutely position the left and right sidebars. Notice that the page background shows through where we cleared the space, since the margins are not part of DIV 3. Look what happens when I turn the sidebars on.

This is DIV Five.

This is typically the footer of the page.