Many Boxes: a CSS Layout Support
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.
Rachel Andrew
Rachel Andrew is a trained dancer and singer, whose CV lists jobs as diverse as company choreographer for a physical theatre company to chargehand carpenter for “The Mousetrap” at St. Martin’s Theatre in London’s West End. After leaving the theatre when pregnant with her daughter, Rachel started to design sites mainly out of curiosity into how it worked. It didn’t take too long for her to figure out that her skills lay in development as opposed to design and these days she tends to leave the design to designers so she can concentrate on writing code, dismantling computers and installing Linux on anything that stays still long enough.
Rachel has worked in the industry as a webmaster, technical project manager and senior web developer but in September 2001 set up her own company ‘edgeofmyseat.com’, which provides complete web solutions and outsourced development services for design agencies and Internet start-ups who do not have in-house web developers.
As well as managing and doing much of the development on projects for edgofmyseat.com Rachel is a published author and worked as a co-author on the following titles for Glasshaus:
Dynamic Dreamweaver MX ISBN:1904151108
Fundmental Web Design and development Skills: ISBN:1904151175
Dreamweaver MX Design Projects: ISBN:1904151272
Rachel is also a member of the Web Standards Project serving on The Dreamweaver Task Force.
In her spare time Rachel studies for ‘fun’ with the Open University, does family and local history research and spends time with her 5 year old daughter and her other half, Drew McLellan.