CSS Multi-Column Layout Resources
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:
Then there’s the One True Layout. Eric Meyer says of the article:
Now we have a way to order columns logically in the source while displaying them in any order desired. For any number of columns. With equal height columns and accurate placement with no need for tables for layout.
Cordially, David.
November 3rd, 2005 at 10:57 pmHi
I have a problem with CSS and JavaScript.
Please can any one help me to manage a stick up footer on the website for IE 5.0 +. As you can see 1 on http://www.bmw.co.uk
thanks
Imran Hashmi
November 4th, 2005 at 3:05 amhttp://www.visionstudio.co.uk
Quick response to Imran: see if this Sitepoint FAQ helps.
Cordially, David.
November 6th, 2005 at 10:44 pmGreat!!
August 1st, 2006 at 11:46 am