Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Use CSS-based grids for website layouts

Monday, December 6th, 2010 by Servage

In the beginning of the evolution of the world wide web, we saw many websites relying on table based layouts. Actually, it was pretty genius, because it took a two dimensional table and build the layout of the website within it. However, the table had one major problem. It wasn’t meant to be used like that and ruined the logic of the page. A table element should be used to represent tabular data, not layout. This is why the div and span element comes in handy today for modern css designers. These are elements you can use more freely, and still create both proper valid HTML code, and nice design. The goal is to make your HTML code a logical representation of your content (so it even makes sense if the css is disabled), and have all design related instructions within your css code.

There are quite a few tools out there to assist you in creating nice css based layouts. Css Zen Garden is a project with lots of examples how css can totally change any given HTML structure, if you obey a few groundrules of HTML. I would also like to direct your attention towards the 960 Grid System, which is a pretty clever css script that can help you create standard layouts for your websites. The Yahoo User Interface project also has a grid system. And there are probably many more! Feel free to post other useful related links in the commends below :-)

Use CSS-based grids for website layouts, 4.1 out of 5 based on 8 ratings
Categories: Guides & Tutorials

Keywords: , ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

1 comment (leave a comment)

Great Blog post. I am going to bookmark and read more often. I love the Blog template

Leave a comment

You must be logged in to post a comment.