January 22, 2007

January 2007 Meeting Report:
Two-column Layouts

At the January meeting, we worked on two-column fixed width layouts, which are more difficult than liquid layouts. We still use the float and clear properties, employ the DIV tag extensively, and manipulate the CSS box model.

A fixed-width layout needs an outside DIV to create an outer box within which we build our page, and we reviewed the container/wrapper concept.

We looked again at an example from last month of a page with one float and a large left margin. We then moved on to layouts that float both columns and saw that in browsers other than Internet Explorer, floated elements in a DIV collapse the DIV. Two solutions are (a) a spacer DIV which keeps the wrapper from collapsing, or (b) an inner wrapper that is floated and that can then be used to style the page because it does not collapse.

The samples we used are posted for download and experimenting in the Sample Pages section of this site. The files are listed under Layout Techniques. Look at the source of each page for annotations.

Next month we will look at page templates and then review the template that Saul Rosenbaum demonstrated at Web Design. After that, we will do background-image to make the templates look better, another topic that Saul discussed at Web Design.

No comments: