Wondering how to design websites with a neat layout? Answer is the grid system. Thanks to Krishna for educating me about this.
I used this to generate a css for me. Here are a few tips on how to get started with it easily.
- Div with class container_x, where x is the number of columns, creates an overall container with the appropriate width, centered on the page. Around 960px is a good choice for most screen resolutions.
- Within the container Div, you could create Divs of desired widths by using the class: grid_x, where x is the number of columns to span across. One advantage of this is, once the column width exceeds the container width, the last column automatically moves to the next row.
- Creation of nested columns are also simple. Within a grid Div, further Divs can be created with the same classes. One additional thing to remember is to add the class alpha for the first column and omega to the last column to make adjustments to the margins.
- Div with class clearfix can be used to force a new row.
These were more than enough for me. If you are looking for more details, please visit 960.gs.
You can also do a 'View source' of my pages and look at the layout. :)