It's actually pretty easy with "the magic formula".
We just enhance the formula with percentage, as follows
You get the result in percentage,
ex:-
(900 / 960) x 100 = 93.75%
Note:- decimal numbers acording to maijor browsers
Browser | Value |
Firefox | Two decimals |
Internet Explorer - IE | Four decimals |
Target value | Add target value |
Context value | Add context value |
Yes, its percentage | 100 |
Calculate | |
Percentage value |
Consider the following mock-up, let's start convert that to CSS, to create responsive fluid grid.
#wrapper{
margin: 0 auto;
width: 960px;/* 900 / 960 */
}
#container{
margin: 0 auto;
width: 93.75%;/* 900 / 960 */
}
#main{
float: left;
width: 72.22222%;/* 650 / 900 */
}
#side{
float: right;
width: 23.8888%;/* 215 / 900 */
}