Responsive 3 2 1 Column pure CSS

http://blog.kangrian.com

by Emmanuel Garcia

HTML

<div class="responsive grid">
	<div class="col column_1_of_3" style='background:red;'>
	ooooo
	</div>
	<div class="col column_2_of_3" style='background:yellow;'>
oooo
	</div>
	
</div>

CSS

/*  responsiveS  */
.responsive {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }


/*  gridING  */
.grid:before,
.grid:after {
	content:"";
	display:table;
}
.grid:after {
	clear:both;
}
.grid {
    zoom:1; /* For IE 6/7 */
}

/*  GRID OF THREE  */
.column_3_of_3 {
	width: 100%;
}
.column_2_of_3 {
	width: 49%;
}
.column_1_of_3 {
	width: 49%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}

@media only screen and (max-width: 480px) {
	.column_3_of_3 {
		width: 100%; 
	}
	.column_2_of_3 {
		width: 100%; 
	}
	.column_1_of_3 {
		width: 100%;
	}
}