Tips for CSS Floats will continue to produce a decent line-up of CSS techniques that will enable you to create a difference to your website!
The Layout Challenges
Let us check out a website and its layout. The home page of Circa Spring 2001 has six huge blocks that hold and organize the content [mainly using three main tables to lay out the page design].
- A top navigation bar with five text links and a search form
- An advertisement block that holds the banner
- Main content area that will hold articles, banners, advertisements and resources in the site
- A left navigation bar that will hold all the text links and Web Reference logo of the site
- A right navigation bar that will hold the text links organized as structure of the site
- A colored box inside the main area that will hold the “Tips of the day” or “Quote of the day” column
Now the question is whether this complicated layout can be replaced using only CSS or not? Off course yes! Other than the top navigation bar, advertisement block and “Tip of the day” part, you are provided with a three column layout. Since the middle column will be the one with more content so the height of the document will be coded as per the block, and the three columns should vertically be of the same size. You must have noticed the white gap that seems to separate left column from the main content area and another one that also does the same for the right column. The separators will have the same width [9 pixels] as the margin around the table to the edge of the browser windows.
Markup of 3-column layout with tables
This is an old solution of web page layout accomplished with a table format. The content of document is mingled with markup intended to define the visual representing of content:
<html> <head> <title>Table layout</title> </head> <body bgcolor="white"> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td colspan="3" valign="top"> <font color="red" face="verdana, sans-serif"> A banner that sits at...top of the page.</font> </td> </tr> <tr> <td width="190" valign="top"> <font color="green" face="verdana, sans-serif"> A column on ... left of the page.</font> </td> <td valign="top"> <font color="blue" face="verdana, sans-serif"> A column in ... center of the page.</font> </td> <td width="190" valign="top"> <font color="orange" face="verdana, sans-serif"> A column on ... right of the page.</font> </td> </tr> </table> </body> </html>
Markup of 3- column layout with CSS
This coding is more organized as visual layout instructions are removed:
<html> <head> <title>CSS layout</title> <style type="text/css"> @import url("threecolcss.css"); </style> </head> <body> <div id="banner"> A banner that sits at ... top of the page. </div> <div id="rightcontent"> A column on ... right of the page. </div> <div id="leftcontent"> A column on ... left of the page. </div> <div id="centercontent"> A column in ... center of the page. </div> </body> </html>
In case you are not using Internet Explorer 5+, Opera 5+ or a browser based on Mozilla, such as NS6+, then these two pages [with table layout and CSS layout] will look completely different. But do not make any mistakes. Pages laid out in CSS will never look the same in newer and older browsers. Older browsers, like NS4 or IE4 are lacking in their support of CSS1 recommendation from 1996. CSS layout is mostly impossible in these browsers, with the exception of non-liquid, pixel-specific layouts like those usually used in games.
