Different grids and floatings

dabblet.css

/**
 * Different grids and floatings
 */

/* just the page layout */
body {
	font-family: Arial, Helvetica, verdana, sans-serif;
	font-size: 100%;
	color: #222;
	background: #ef4534;
}
.wrapper {
	max-width: 60em;
	min-width: 640px;
	margin: 0 auto;
}
.wbox {
	padding: 20px;
	background: #fff;
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
	   -moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
	    -ms-box-shadow: 0 0 10px rgba(0,0,0,0.6);
	     -o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
	        box-shadow: 0 0 10px rgba(0,0,0,0.6);
}

/* first - display:table & clearfix */
.first {
	display: table;
	width: 100%;
	table-layout: fixed;
}

/* clearfix
 * http://css-tricks.com/snippets/css/clear-fix/
 */
.group:before,
.group:after {
    content: "";
    display: table;
} 
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

/* second - margin instead of floating */
.second {
	/* this works */
	overflow: hidden;
	
	/* but this will work, too
	float: left;
	width: 100%;
	*/
}
.second .gl {
	float: left;
}
.second .gr {
	width: auto;
	float: none;
	margin-left: 33%;
}

/* third - floatings without display:table */
.third {
	overflow: hidden;
}

/* fourth - floatings with special clearing div */
.fourth .clear-both {
	visibility: hidden;
	clear: both;
	border: 0;
	font: 0/0 a;
	text-shadow: none;
	color: transparent;
	background-color: transparent;
}
* html .clear-both { zoom: 1; } /* IE6 */


/* grid widths and floatings */
.gl { float: left; }
.gr { float: right; }

.g20 { width: 20%; }
.g25 { width: 25%; }
.g33 { width: 33%; }
.g38 { width: 38%; }
.g50 { width: 50%; }
.g62 { width: 62%; }
.g66 { width: 66%; }
.g75 { width: 75%; }
.g80 { width: 80%; }

/* typography */
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: normal;
}
h1 {
	font-size: 175%;
	line-height: 1.4286em;
	margin-top: 0.7143em;
	border-bottom: 1px solid #ccc;
}
h2 {
	font-size: 150%;
	line-height: 1.6667em;
	margin-top: 0.8333em;
}
h3 {
	font-size: 125%;
	line-height: 1em;
	margin-top: 1em;
}
h4 {
	font-size: 100%;
	line-height: 1.25em;
	font-weight: bold;
	margin-top: 1.25em;
}

p {
	font-size: 1em;
	line-height: 1.25em;
	margin-top: 1.25em;
}

hr {
	padding: 0;
	margin: 0.625em 0;
	border: 0;
	border-bottom: 1px solid #ccc;
	font: 0/0 a;
	color: transparent;
	background-color: transparent;
	text-shadow: none;
}

dabblet.html

<div class="wrapper">
	<div class="wbox">
		<h1>Testing differnet grid and floating methods</h1>
	
		<h2>1. Display: table and clearfix</h2>
		
		<div class="first group">
			<div class="g33 gl">
				<h3>Left</h3>
			</div>
			<div class="g66 gr">
				<h4>Right</h4>
			</div>
		</div>
		
		<p>Test after grid. It works!</p>
		<hr />
		
		<h2>2. Margin instead of floating</h2>
		
		<div class="second">
			<div class="g33 gl">
				<h3>Left</h3>
			</div>
			<div class="g66 gr">
				<h4>Right</h4>
			</div>
		</div>
		
		<p>Test after grid. It works!</p>
		<hr />
		
		<h2>3. Floatings without the display:table</h2>
		
		<div class="third">
			<div class="g33 gl">
				<h3>Left</h3>
				<p>Lorem ipsum</p>
			</div>
			<div class="g66 gr">
				<h4>Right</h4>
			</div>
		</div>
		
		<hr />

		<h2>4. Floatings with special clearing DIV</h2>
		
		 <div class="fourth">
		 	<div class="g33 gl">
				<h3>Left</h3>
				<p>Lorem ipsum</p>
			</div>
			<div class="g66 gr">
				<h4>Right</h4>
			</div>
			<div class="clear-both"> &#160; </div>
		</div>
		
		<p>Test after grid. It works!</p>
		<hr />
	</div>
</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}