Responsive grid

Insert in header for fast structure load

All other styles should be inserted in the footer and even better loaded from their own document
body{margin: 0px;}
/* SEO4 RESPONSIVE HTML5 GRID */
.seo4body.mainframe {width: 1100px; margin: auto;}
.seo4part {margin:0px;padding:0px;clear:both;}
.grid {margin:1% 0 1% 1.6%;float:left;display:block;}
.grid:first {margin-left:0;}
.mobileonly {display:none;}
.row {zoom:1;} 
.row:before, .row:after{display:table;}
.row:before {content:"";}
.row:after {content:""; clear:both;}
.div_fullwidth {width:100%;}
.div_half, .div_two {width:49.2%;}
.div_quart {width:23.8%;}
.div_thirdquart {width:74.6%}
.div_third, .div_three {width:32.26%;}
.div_twothird {width:66.13%;} 
.div_six {width:15.33%;} 
.div_eight {width:11.1%;}
.div_ten {width:8.56%}

/* SEO4 - ONLY RESPONSIVE - CSS */ 
@media only screen and (max-width: 500px) { 
.grid {margin:1% 0 1% 0%;}
.mobilesplit {width:49,2%;} 
.mobilenone {display:none;} 
.mobileonly {display:inherit;}

.div_fullwidth, .div_quart, 
.div_thirds, .div_half, .div_3of4, 
.div_2of3, {width:100%;} 
}

HTMl5 Structure

<!DOCTYPE HTML>
<html>
<head>
<title>SEO4 HTML5 STRUCTURE</title>
</head>
<body>
   <div class="seo4body mainframe">
      REPONSIVE GRID HERE
   </div>
</body>
</html>

Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Choose GRID size

    <div class="seo4part row">
    	<div class="grid div_fullwidth">
    	MAINFRAME
    	</div>
    </div>
    
    <div class="seo4part row">
    	<div class="grid div_half">
      <p class="toplogo"><a href="#"><img src="./img/LOGO.png"></a></p>
    	</div>
    	<div class="grid div_half">
    	1 of 2
    	</div>
    </div>
    
    <div class="seo4part row">
    	<div class="grid div_third">
    	1 of 3
    	</div>
    	<div class="grid div_third">
    	1 of 3
    	</div>
    	<div class="grid div_third">
    	1 of 3
    	</div>
    </div>
    
    <div class="seo4part row">
    	<div class="grid div_quart">
    	1 of 4
    	</div>
    	<div class="grid div_quart">
    	1 of 4
    	</div>
    	<div class="grid div_quart">
    	1 of 4
    	</div>
    	<div class="grid div_quart">
    	1 of 4
    	</div>
    </div>
    

    Full code

    <!DOCTYPE HTML>
    <html>
    <head>
    <title>SEO4 HTML5 RESPONSIVE</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/seo4grid.css">
    <link rel="stylesheet" href="/css/seo4html5.css">
    <link rel="stylesheet" href="/css/seo4html5.css">
    </head>
    <body>
       <div class="seo4body mainframe">
          REPONSIVE GRID HERE
       </div>
    
    
    <script type="text/javascript" src="/js/scroltotop.js"></script>
    </body>
    </html>