A popular layout style for sites that have lots of small chunks of content is to lay it out in lots of small boxes – an example is the BBC web site. With a tables-based layout, this would usually mean creating a grid with the table cells and putting content into each cell. In this article we will look at creating a layout which uses this boxy effect using CSS for layout.

Once we have created a three column layout to contain our boxes using CSS, we can explore how to position our boxes within that, so that content never overlaps, regardless of how much text is in each box, or whether the user resizes text. Then we explore how to change the CSS to make the layout less "boxy", but retain the same markup.

The code is supplied, and will work with Dreamweaver MX and MX 2004, but the tutorial uses the Insert Div Tag dialogue that is only available with MX 2004.