Many Boxes: a CSS Layout

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.

CSS Layouts: Fixed widths and float

This tutorial will take you through the process of building a modern page design using CSS for layout and bearing in mind best practice in terms of document structure. The layout that we will be building demonstrates two useful techniques in terms of CSS layouts. We are going to design a page with a fixed width, centered layout and we will also be using the float property within this layout – so if you have been wondering how to do a fixed width layout or how float can be used for CSS positioning then this tutorial will hopefully answer some of your questions!

As this is quite a complex tutorial and we skip through some of the things quite quickly that are covered in other tutorials I have included the CSS and XHTML files in the code download, so you can compare your results with mine or use mine as a starting point for experimenting with this layout.

Draw Layers and DHTML

This article shows you how to set up behaviours and then apply behaviours to draw layers to create dynamic Web pages.  You will learn how to set up draw layers that appear or disappear when clicked, or layers that are draggable and can be repositioned anywhere in the page or within defined limits - it's up to you.  There's no coding necessary - it's all done through Dreamweaver behaviors which combine an event (something that happens on the screen) with an action (what the browser should do when the event is detected). Adding a behavior to a Web page allows visitors to interact with your page and the page to perform important tasks without having to reload the page.