Problem calculating percentage for body width

Question

I need to build a classic 960px layout and I have to convert that 960px into %. So, I should use 960px / 16px = 60%, right?

Note: 960px =

Answer 1

This is how you can solve this:

consider body to be 90% which would mean 90% of the screen whatever be the size.

body{
width:90%;
margin: 0 auto;
}

Now consider a class container within the body tag

.container{
width:100%  //This would utilize the complete 90% of the body, if you make the width 90% for container then it would consider 90% of 90% of body
margin: auto;
}

Now Consider you need a 5 column grid layout and you decide you have a gutter of 2px between each column then 100% - (2%+2%+2%+2%) = 92% (I didn't added one more 2% is because you are going to have margin-left or margin-right = 0)

Now, divide 92/5 (percentage/columns) you would get an value of 18.4%. This would mean allocate 18.4% of width to each column you create and you would get the perfect layout you want.

Here is an example that can explain you, copy the entire code and paste in a blank file and save it as index.html or any name and run:

  



  






1st Column: 
184px/1000px 
18.4% 
2nd Column: 
184px/1000px 
18.4% 
    
3rd Column: 
184px/1000px 
18.4% 
    
4th Column: 
184px/1000px 
18.4% 
    
5th Column: 
184px/1000px 
18.4% 
        

Run the above example and play a bit more and you should get a good grasp. If you further need help feel free to contact me.

Regards, Udit Goenka http://www.iuditg.com