Please Note: This very, very simple layout bootstrap is only really of use to me, unless you happen to be supporting a couple of WordPress themes you originally designed using your own over-simplified version of the 960 grid framework - that's probably only me then! If you are looking for a proper bootstrap, try Twitter bootstrap

This is the Content

This is the content. The content is centered in the viewport using the margin 0 auto technique. Just remember, main layout sections in this container have a left and right margin of 10 pixels. Obviously the total width of any sections then need to add up to 960 pixels.

This is the Main Content

This main content block is 620 pixels wide, with out left and right margins added we have total width of 640 pixels. 640 plus 320 gives 960.

By the way I did not devise this concept. Some very clever people at the 960 grid system did. Unfortunatley when I first read about the 960 grid system, I thought the column spaning technique was counter intuative ( i.e. too hard for me to understand ) so I simply used the parts I understand and like. These were, standardising all my websites to a width of 960 pixels and dividing the page into 12 x 40 pixel wide columns to create a simple grid.

What I like most of all is the neat way the column widths work out producing some pleasing layouts. For example: 220px 220px 220px 220px - great for footers, 620px 300px great for blogs, 300px 300px 300px - great for dividing the page into, er, three equal sections. Basically the numbers are easy and produce well proportioned layouts. I've also added my own background images for the header, main site content area and the footer so you can check your alignment as you go.

Here is a simple example of three equal columns, piece of cake:

Column one of three equal columns

This column is 300 pixels wide.

Column two of three equal columns

This column is 300 pixels wide.

Column three of three equal columns

This column is 300 pixels wide. Add them together with their 10 pixel left and right margins and you get, yep 960 pixels. Even I can do those maths.

So you might be thinking, but that's a lot of extra divs. Why not create a one container with left and right margin of 10 pixels and plonk every section inside that?

The answer is flexibility. All of your sections can now be moved really easily.. This allows you to rapid prototype actual HTML. Rapid prototyping of actual HTML is something I spend a lot of time doing. Obviously if you have a different work-flow where photoshop designs need to be created and signed-off the the Marketing Department and other stakeholders before the HTML is coded, then this bootstrap is not going to work for you.