Responsive with ems

Responsive Media Queries

/*

	Imagine a setup of a two-column website
	of course - you have to adapt the CSS to your needs.
	PROs:
	your responsive layout is adaptive to the font, not any arbitrary pixels.
	You have control about the font, not about the pixels.

	main.group
	#########################################################
	#			#				#	
	#	nav		#	section			#
	#			#				#
	#			#				#
	#			#				#
	#			#				#
	#			#				#
	#			#				#
	#			#				#
	#			#				#
	#########################################################

*/


main
{
	margin: 0 auto;
	width: 70%;
}


nav
{
	width: 20%;
}

section
{
	width: 80%
	max-width: 35em;
}

@media (max-width: 80rem)
{
	section
	{
		width: 60%;
	}
}
@media (max-width: 60rem)
{
	section
	{
		width: 80%;
		max-width: 40em;
	}
}
@media (max-width: 50rem)
{
	section
	{
		width: 95%;
	}
}


/* TOOLBELT - FLOAT CONTAINMENT & CLEARING */

.group
{
	zoom: 1;
}


.group:after
{
	clear: both;
}

.group:before,
.group:after
{
	display: table;
}

.group > *
{
	float: left;
}