Flexible "Float Box Left" Layout

The CSS Box Property "float left" can be used to array Div "boxes" across a Web page layout to create a series of columns of content. A percentage of the page width can be specified for each Div (box) so that the sum of the percentages is less than the total page width, taking into account inherent Browser padding vagaries for various user-agents. Note: I have used a total width of 99% here to accommodate MSIE 6.x Browser padding -- the total width may have to be reduced to 98% (or less) if wider borders are specified for individual boxes, with box widths reduced accordingly - Refer to The Box Model bug .

I have used three Div boxes (columns) of 33%, 33% and 33% for this exemplar -- you could just as well use two, three, four, five -- as many as practical -- boxes using this principle. I have also used a one pixel border around each box for illustration purposes.

Left Box Div

Layout and content is styled as desired in the usual manner. In this instance, the styling parameters are:

Center Box Div

Layout and content is styled as desired in the usual manner. In this instance, the styling parameters are:

Right Box Div

Layout and content is styled as desired in the usual manner. In this instance, the styling parameters are: