December 22, 2006

December 2006 Meeting Report:
Fixed-width Layouts

At the December meeting of the PACS CSS Workshop, we continued on the topic of using CSS to lay out a page, emphasizing that the basic concept is moving boxes -- repositioning the boxes that are created by HTML tags.

We reviewed our work at the November meeting where we used CSS for a two-column liquid layout, that is, one that expands as the browser expands. We then showed that making the columns fixed widths is more complicated.

We took a slight detour and showed how a page can be set up to look like two fixed-width columns without actually creating columns, but by employing float and clear. The file we worked one is uploaded to the Samples Pages section (see index in sidebar) in case anyone wants to download it and experiment with the styles.

We then showed an example of settng up two fixed-width columns, with one floated and one having a wide left margin. This technique has its limits, but it works across browsers and is easy to set up. This sample file has also been uploaded.

Next month, we will continue on laying out fixed width pages using CSS.

No comments: