Resources for Web Development Students @ Robin’s Blog

I encourage you to use CSS instead of tables for your XHTML Additional Cases and projects. Creating a multi-column layout with CSS is not always easy. The first thing you should do is determine how you want your page or pages to layout on paper before you ever begin coding (I will really appreciate this when I am helping you!). In One Way to Design a Web Site Tommy Olsson discusses the process that he uses to build his pages, you may find this process helpful.

Once you have the layout on paper, see if you can find a similar layout on the Internet; use Google to search for +three +column +layout +css. The sample layouts that are on the web will give you an XHTML and CSS framework for developing your page. Here are a few tutorials and examples that you may find helpful when you’re starting with multi-column layouts with CSS:

456 Berea St. – Simple 2 column CSS layout – a great starting point for creating a two column layout with CSS floats.

Mezzoblue – How to Conceive a Layout – a simple two column layout with floats.

Creating Liquid Layouts with Negative Margins – a three column layout that uses negative positioning; the order of the content is optimized for text readers and browsers that don’t support CSS.

CSS Discuss has a chart with links to various three column CSS layouts. The chart indicates whether the layout includes a header and footer, if it is fluid, and other compatibility issues. There are also links to two column layout samples. CSSDiscuss has excellent layout resources.

I would also recommend that you read the following CSS articles on positioning and layouts:

Relatively Absolute
Float Layouts
Fixed vs Liquid vs Elastic
The Jello Mold Piefecta Layout

The above articles should help you to better understand absolute/relative positioning, working with floats, and other layout techniques.

There are many sites that have great articles and CSS demonstrations; start exploring these sites now:

Position is Everything
CSS Play