Epiphany
All of this is made possible by the content div right margin setting. The outer content div first sets the area for the third column space by pushing out an additional 170px on the right margin. The promo div now has the ability to use the twocolwrap space of -170px. The promo div floats left in the twocolwrap space. The twocolwrap boundries are subjecated to use the space allowed which is the right margin area set by content so the promo in esence gets to piggy back by using its 170px space as a third column in what is leveraged from the content div by the twocolwrap.
About This Layout
This page is styled with CSS. It demonstrates a floats-based Three Column layout.
The concept
The five structural divs—header, nav, content, promo and footer—nest inside a fixed width containing div. The three columns, nav, content and promo, are sized with percentages and are floated so they sit side by side. The footer is cleared so it sits beneath whichever of the floated columns is longest.
Auto left and right margin settings are applied to the fixed-width containing div, which makes the layout center in a wide browser window.
The Stylib Files
This example uses two CSS files from the Stylib CSS library
The XHTML markup file is called
Note: Inner divs inside each of the five main divs allow padding and borders to be applied without affecting the width of the main structural divs.