Libin Pan

Computer monitors are getting bigger and bigger, so do the html pages. People start to add more columns into the layout.
To create a three columns layout, in a very traditional way you can do it in a table, like this:
[html]

[/html]
There are some obvious downside on this:

• Mix data and presentation
• Not browser friendly, try to browser this use a mobile phone? I am not saying iPhone or iPod Touch.

So how to fix it? You can use css with “position: absolute;” or “Float”:
[html]

[/html]
[css]
#wrapper {width: 800px;}
#main {margin-top: 10px;}
#sideleft {float: left; width: 200px; border: 1px solid black; background-color: #dddddd;}
#sideright {float: right; width: 200px; border: 1px solid green; background-color: #99ff99;}
#content {border: 1px solid blue; background-color: #9999ff; margin: 0 20px 0 10px;}
[/css]

Want to know more?

• Practical CSS Layout Tips, Tricks, & Techniques
• Three column layout, without tables
• Book: HTML Utopia: Designing Without Tables Using CSS

English css, html