ps-team · November 8, 2013 10:30
diff --git a/div-cells.html b/div-cells.html
 <!doctype html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>divs - tables - cells - Go</title>
 <style>
 h2 {
 	font-weight:100;
 	margin:0;
 	padding:0;
 	font-size:8em;
 	line-height:1em;
 }
 h3 {
 	font-family: Georgia, serif;
 	font-weight: normal;
 	font-style: italic;
 	font-size: 2em;
 	line-height: 1.5em;
 	border-bottom: dotted 1px #fff;
 	padding-bottom: 10px;
 	margin: 0;
 }

 p {
 	margin: 0;
 	padding: 10px 0;
 	line-height: 1.5em;
 }

 .table {
 	display: table;
 	height: 200px;;
 	width: 100%;
 	table-layout: fixed;
 	float: left;
 	border-collapse: collapse;
 }

 .cell {
 	display: table-cell;
 	padding: 10px;
 	vertical-align:top;
 }

 .row { display: table-row; }

 .grey {
 	background-color: #666;
 	text-align: center;
 	font-size: 1em;
 	color: #fff;
 	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 	font-weight: 300;
 	padding: 20px;
 	height:100%;
 }

 .random {
 	width: 300px;
 	float: left;
 }

 .wrapper {
 	float: left;
 	width: 800px;
 }
 </style>
 </head>

 <body>
 <div class="table">
 	<div class="cell">
 		<div class="grey">
 			<h3>Far far away </h3>
 			<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the</p>
 		</div>
 	</div>
 	<div class="cell">
 		<div class="grey">
 			<h3>Lorem Ipsum</h3>
 			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,</p>
 		</div>
 	</div>
 	<div class="cell">
 		<div class="grey"><h3>Cicero</h3><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt</p></div>
 	</div>
 </div>
 <div class="table">
 	<div class="cell">
 		<div class="grey"><h3>Li European Lingues</h3><p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in</p></div>
 	</div>
 	<div class="cell">
 		<div class="grey"><h3>Li European Lingues (En)</h3><p>The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in</p></div>
 	</div>
 </div>
 <div class="table">
 	<div class="cell">
 		<div class="grey"><h3>Cicero (En)</h3><p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system,</p></div>
 	</div>
 	<div class="cell">
 		<div class="grey"><h3>Werther</h3><p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm</p></div>
 	</div>
 	<div class="cell">
 		<div class="grey">
 <h3>Kafka</h3>			<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted</p>
 		</div>
 	</div>
 	<div class="cell">
 		<div class="grey"><h3>Pangram</h3><p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs.</p></div>
 	</div>
 </div>
 <div class="table">
 	<div class="row">
 		<div class="cell">
 			<div class="grey">
 				<h2>1</h2>
 			</div>
 		</div>
 		<div class="cell">
 			<div class="grey">
 				<h2>2</h2>
 			</div>
 		</div>
 		<div class="cell">
 			<div class="grey">
 				<h2>3</h2>
 			</div>
 		</div>
 		<div class="cell">
 			<div class="grey">
 				<h2>4</h2>
 			</div>
 		</div>
 		<div class="cell">
 			<div class="grey">
 				<h2>5</h2>
 			</div>
 		</div>
 	</div>
 </div>
 </body>
 </html>
diff --git a/what the b/what the


 The div that has the style display:table; must also contain table-layout: fixed; otherwise the "cells" will not have equal width.

 The div that contains the style display:cell; must also contain vertical-align:top; otherwise extra padding will appear at the top causing a misalignment of the cells

 Don't use rows. For each new row use a table instead otherwise the "cells" will not scale to fit the available space if an irregular number is added on each row.
	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>divs - tables - cells - Go</title>
	<style>
	h2 {
	font-weight:100;
	margin:0;
	padding:0;
	font-size:8em;
	line-height:1em;
	}
	h3 {
	font-family: Georgia, serif;
	font-weight: normal;
	font-style: italic;
	font-size: 2em;
	line-height: 1.5em;
	border-bottom: dotted 1px #fff;
	padding-bottom: 10px;
	margin: 0;
	}

	p {
	margin: 0;
	padding: 10px 0;
	line-height: 1.5em;
	}

	.table {
	display: table;
	height: 200px;;
	width: 100%;
	table-layout: fixed;
	float: left;
	border-collapse: collapse;
	}

	.cell {
	display: table-cell;
	padding: 10px;
	vertical-align:top;
	}

	.row { display: table-row; }

	.grey {
	background-color: #666;
	text-align: center;
	font-size: 1em;
	color: #fff;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	padding: 20px;
	height:100%;
	}

	.random {
	width: 300px;
	float: left;
	}

	.wrapper {
	float: left;
	width: 800px;
	}
	</style>
	</head>

	<body>
	<div class="table">
	<div class="cell">
	<div class="grey">
	<h3>Far far away </h3>
	<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the</p>
	</div>
	</div>
	<div class="cell">
	<div class="grey">
	<h3>Lorem Ipsum</h3>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,</p>
	</div>
	</div>
	<div class="cell">
	<div class="grey"><h3>Cicero</h3><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt</p></div>
	</div>
	</div>
	<div class="table">
	<div class="cell">
	<div class="grey"><h3>Li European Lingues</h3><p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in</p></div>
	</div>
	<div class="cell">
	<div class="grey"><h3>Li European Lingues (En)</h3><p>The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in</p></div>
	</div>
	</div>
	<div class="table">
	<div class="cell">
	<div class="grey"><h3>Cicero (En)</h3><p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system,</p></div>
	</div>
	<div class="cell">
	<div class="grey"><h3>Werther</h3><p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm</p></div>
	</div>
	<div class="cell">
	<div class="grey">
	<h3>Kafka</h3> <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted</p>
	</div>
	</div>
	<div class="cell">
	<div class="grey"><h3>Pangram</h3><p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs.</p></div>
	</div>
	</div>
	<div class="table">
	<div class="row">
	<div class="cell">
	<div class="grey">
	<h2>1</h2>
	</div>
	</div>
	<div class="cell">
	<div class="grey">
	<h2>2</h2>
	</div>
	</div>
	<div class="cell">
	<div class="grey">
	<h2>3</h2>
	</div>
	</div>
	<div class="cell">
	<div class="grey">
	<h2>4</h2>
	</div>
	</div>
	<div class="cell">
	<div class="grey">
	<h2>5</h2>
	</div>
	</div>
	</div>
	</div>
	</body>
	</html>


	The div that has the style display:table; must also contain table-layout: fixed; otherwise the "cells" will not have equal width.

	The div that contains the style display:cell; must also contain vertical-align:top; otherwise extra padding will appear at the top causing a misalignment of the cells

	Don't use rows. For each new row use a table instead otherwise the "cells" will not scale to fit the available space if an irregular number is added on each row.