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.

December 16 Meeting Announcement

The next meeting of the PACS CSS Workshop will be this Saturday, December 16, at the 9-10 hour.

Last month we worked on two-column liquid layouts using CSS. This month, we will continue by looking at fixed-width layouts. They are trickier to do, and we will look at a few ways to accomplish the task. Depending on time, we might also throw in a couple of other tips on using CSS.

We will be back to the full complement of sessions this month, with JavaScript, Flash, ASP.net, and Web Design. Be sure to stay for Web Design because we will have Saul Rosenbaum returning for another outstanding presentation, and we will be raffling off another new CSS book, CSS Mastery: Advanced Web Standards Solutions.

November 2006 Meeting Report: Two-column Layouts

At our November meeting, we took the float and clear properties, combined them with the DIV tag and the box model, and began formatting text on a page.

We started with a single column and centered it by making left and right margins auto. We pointed out that these properties do not work in Internet Explorer unless a DOCTYPE is declared.

We then worked on a two-column, fluid layout. In the process, we discussed another Internet Explorer box model problem, that being the way IE calculated width in earlier versions of the browser. Again, declaring a DOCTYPE solves the problem.

We had an extra thirty minutes this month, and we spent the time reviewing CSS editors and validation sites. Links to these utilities have been added to the CSS Resources Page of this site (see sidebar).