/* Copyright : RST FORUM */ .container-12 { margin:0 auto; width:960px; overflow:hidden; } .container-12 .container-12 { margin:0 -16px 0 -16px; width:auto; display:inline-block; } .grila_1 { width:48px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; } .grila_2 { width:128px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; } .grila_3 { width:208px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; } .grila_4 { width:288px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; } .grila_5 { width:368px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; } .grila_6 { width:448px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; } .grila_7 { width:528px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; } .grila_8 { width:608px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; } .grila_9 { width:688px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; } .grila_10 { width:768px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; } .grila_11 { width:848px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; } .grila_12 { width:928px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; } .offset_1 { margin-left:96px; } .offset_2 { margin-left:176px; } .offset_3 { margin-left:256px; } .offset_4 { margin-left:336px; } .offset_5 { margin-left:416px; } .offset_6 { margin-left:496px; } .offset_7 { margin-left:576px; } .offset_8 { margin-left:656px; } .offset_9 { margin-left:736px; } .offset_10 { margin-left:816px; } .offset_11 { margin-left:896px; } .show-phone { display:none !important; } .show-tablet { display:none !important; } .show-screen { display:inherit !important; } .hide-phone { display:inherit !important; } .hide-tablet { display:inherit !important; } .hide-screen { display:none !important; } /***** Grafica mare ( than 960px ) *****/ @media only screen and (min-width:1200px) { .container-12 { margin:0 auto; width:1200px; overflow:hidden; } .container-12 .container-12 { margin:0 -20px 0 -20px; width:auto; display:inline-block; } .grila_1 { width:60px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; } .grila_2 { width:160px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; } .grila_3 { width:260px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; } .grila_4 { width:360px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; } .grila_5 { width:460px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; } .grila_6 { width:560px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; } .grila_7 { width:660px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; } .grila_8 { width:760px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; } .grila_9 { width:860px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; } .grila_10 { width:960px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; } .grila_11 { width:1060px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; } .grila_12 { width:1160px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; } .offset_1 { margin-left:120px; } .offset_2 { margin-left:220px; } .offset_3 { margin-left:320px; } .offset_4 { margin-left:420px; } .offset_5 { margin-left:520px; } .offset_6 { margin-left:620px; } .offset_7 { margin-left:720px; } .offset_8 { margin-left:820px; } .offset_9 { margin-left:920px; } .offset_10 { margin-left:1020px; } .offset_11 { margin-left:1120px; } .show-phone { display:none !important; } .show-tablet { display:none !important; } .show-screen { display:inherit; } .hide-phone { display:inherit !important; } .hide-tablet { display:inherit !important; } .hide-screen { display:none !important; } } /***** Tableta (Smaller than 959px) *****/ @media only screen and (min-width: 768px) and (max-width: 959px) { .container-12 { margin:0 auto; width:768px; overflow:hidden; } .container-12 .container-12 { margin:0 -14px 0 -14px; width:auto; display:inline-block; } .grila_1 { width:36px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; } .grila_2 { width:100px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; } .grila_3 { width:164px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; } .grila_4 { width:228px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; } .grila_5 { width:292px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; } .grila_6 { width:356px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; } .grila_7 { width:420px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; } .grila_8 { width:484px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; } .grila_9 { width:548px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; } .grila_10 { width:612px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; } .grila_11 { width:676px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; } .grila_12 { width:740px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; } .offset_1 { margin-left:78px; } .offset_2 { margin-left:142px; } .offset_3 { margin-left:206px; } .offset_4 { margin-left:270px; } .offset_5 { margin-left:334px; } .offset_6 { margin-left:398px; } .offset_7 { margin-left:462px; } .offset_8 { margin-left:526px; } .offset_9 { margin-left:590px; } .offset_10 { margin-left:654px; } .offset_11 { margin-left:718px; } .show-phone { display:none !important; } .show-tablet { display:inherit !important; } .show-screen { display:none !important; } .hide-phone { display:inherit !important; } .hide-tablet { display:none !important; } .hide-screen { display:inherit !important; } } /***** Telefon (portrait 300px) *****/ @media only screen and (max-width: 767px) { .container-12 { margin:0 auto; width:300px; overflow:hidden; } .container-12 .container-12 { margin:0; width:auto; display:inline-block; } .grila_1, .grila_2, .grila_3, .grila_4, .grila_5, .grila_6, .grila_7, .grila_8, .grila_9, .grila_10, .grila_11, .grila_12 { width:300px; margin:10px 0 0 0; overflow:hidden; float:left; display:inline; } .offset_1, .offset_2, .offset_3, .offset_4, .offset_5, .offset_6, .offset_7, .offset_8, .offset_9, .offset_10, .offset_11 { margin-left:0; } .show-phone { display:inherit !important; } .show-tablet { display:none !important; } .show-screen { display:none !important; } .hide-phone { display:none !important; } .hide-tablet { display:inherit !important; } .hide-screen { display:inherit !important; } } /***** Telefon (landscape 420px) *****/ @media only screen and (min-width: 480px) and (max-width: 767px) { .container-12 { margin:0 auto; width:456px; overflow:hidden; } .container-12 .container-12 { margin:0; width:auto; display:inline-block; } .grila_1, .grila_2, .grila_3, .grila_4, .grila_5, .grila_6, .grila_7, .grila_8, .grila_9, .grila_10, .grila_11, .grila_12 { width:456px; margin:10px 0 0 0; overflow:hidden; float:left; display:inline; } .show-phone { display:inherit !important; } .show-tablet { display:none !important; } .show-screen { display:none !important; } .hide-phone { display:none !important; } .hide-tablet { display:inherit !important; } .hide-screen { display:inherit !important; } } /***** Clean up *****/ .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } .clearfix:before, .clearfix:after, .continer-12:before, .container-12:after { content:'\0020'; display:block; overflow:hidden; visibility:hidden; width:0; height:0; } .container-12:after, .clearfix:after { clear:both; } .container-12, .clearfix { zoom:1; } .clear { clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0; } HTML <div class="container-12"> <!-- Container 12 --> <div class="grila_1> </div> <!-- Grila poate fi , 1,2,3,4,5,6,7,8,9,10,11,12 P.S uitate in codu sursa css si vezi width pentru fiecare si o sa-ti dai seama ..... Pentru nelamuriri lasa comentariu --> </div> <!-- Container 12::END -->