three column layouts

Three column layouts can be tricky. The problem arises from content that doesn't fit the allowable space.

Here is the css for purl bee a three column layout.

#canvasWrapper { width: 986px; padding: 0 0px 0 0px; }  

#sidebar1Wrapper { display: block; float: left;  width: 180px; padding: 0; padding-right: 53px; } 
#sidebar2Wrapper { display: block; float: right; width: 240px; padding: 0; } 
#contentWrapper { float: left; width: 460px;  }

Moving On

As we all know, web design is constant advancing as technology and design itself change. The question of today is flash versus static html. One example of the evolving state of web design is RogerVivier.com.Simple html and css is made beautiful by the use of flash that turns the site into a virtual movie about this designer's fashion.

A second issue is the layout box itself. Roger uses a layout width of 968px and a height of 568px.The ratio is slightly smaller than 60%, but this is to allow for the width and height of the monitor screen. Here is the layout reduced by half.