Monday, 10 March 2014

Grid based layout css style

/*

----------------------------------------------- */
.page {margin:0 18px;}
.head {padding:0 18px;}
.section {position:relative;overflow:hidden;z-index:-1;}
.row {position:relative;overflow:hidden;z-index:-1;}
.column {float:left;}
.content {padding:0 0px;}
.scroll
{
    float: left;
    overflow: hidden;
    position: relative;
}

/* Column Widths
----------------------------------------------- */
.col1of1 {float:none;}

.col1of2 {width:50%;}

.col1of3 {width:33.33333%;}
.col2of3 {width:66.66666%;}

.col1of4 {width:25%;}
.col3of4 {width:75%;}

.col1of5 {width:20%;}
.col2of5 {width:40%;}
.col3of5 {width:60%;}
.col4of5 {width:80%;}

.col1of6 {width:16.66666%;}
.col5of6 {width:83.33333%;}

.col1of7 {width:14.285714285%;}
.col2of7 {width:28.571428571%;}
.col3of7 {width:42.857142857%;}
.col4of7 {width:57.142857142%;}
.col5of7 {width:71.428571428%;}
.col6of7 {width:85.714285714%;}

.col1of8 {width:12.5%;}
.col3of8 {width:37.5%;}
.col5of8 {width:62.5%;}
.col7of8 {width:87.5%;}

.col1of9 {width:11.111111111%;}
.col2of9 {width:22.222222222%;}
.col3of9 {width:33.333333333%;}
.col4of9 {width:44.444444444%;}
.col5of9 {width:55.555555555%;}
.col6of9 {width:66.666666666%;}
.col7of9 {width:77.777777777%;}
.col8of9 {width:88.888888888%;}

.col1of10 {width:10%;}
.col3of10 {width:30%;}
.col7of10 {width:70%;}
.col9of10 {width:90%;}

.col1of12 {width:8.333333333%;}
.col5of12 {width:41.666666666%;}
.col7of12 {width:58.333333333%;}
.col11of12 {width:91.666666666%;}

.col1of16 {width:6.25%;}
.col3of16 {width:18.75%;}
.col5of16 {width:31.25%;}
.col7of16 {width:43.75%;}
.col9of16 {width:56.25%;}
.col11of16 {width:68.75%;}
.col13of16 {width:81.25%;}
.col15of16 {width:93.75%;}