From ec85bee1ac27700f36a3cbc52e54b8f139a42aa9 Mon Sep 17 00:00:00 2001
From: Jan Philipp Timme <jan.philipp@timme.it>
Date: Wed, 11 Sep 2013 15:53:33 +0200
Subject: [PATCH] [TASK] Add a column bounding box to allow padding within
 columns.

---
 index.html     | 108 ++++++++++++++++++++++++++-----------------------
 style/main.css |  10 +++--
 2 files changed, 63 insertions(+), 55 deletions(-)

diff --git a/index.html b/index.html
index 22ae833..d91a446 100644
--- a/index.html
+++ b/index.html
@@ -37,66 +37,72 @@
 					</div>
 					<div style="clear: both;"></div>
 					<div id="content-grid-container">
-						<div id="content-column-1" class="content-column">
-							<div class="content-container-bounding-box">
-								<div class="content-container">
-									<h1>Col1</h1>
-									<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+						<div class="content-column-bounding-box">
+							<div id="content-column-1" class="content-column">
+								<div class="content-container-bounding-box">
+									<div class="content-container">
+										<h1>Col1</h1>
+										<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+									</div>
 								</div>
-							</div>
-							<div class="content-container-bounding-box">
-								<div class="content-container">
-									<h1>Irgendne Überschrift ...</h1>
-									<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+								<div class="content-container-bounding-box">
+									<div class="content-container">
+										<h1>Irgendne Überschrift ...</h1>
+										<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+									</div>
 								</div>
-							</div>
-						</div><!-- content-column-1 -->
-						<div id="content-column-2" class="content-column">
-							<div class="content-container-bounding-box">
-								<div class="content-container">
-									<h1>Col2</h1>
-									<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+							</div><!-- content-column-1 -->
+						</div><!-- content-column-bounding-box -->
+						<div class="content-column-bounding-box">
+							<div id="content-column-2" class="content-column">
+								<div class="content-container-bounding-box">
+									<div class="content-container">
+										<h1>Col2</h1>
+										<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+									</div>
 								</div>
-							</div>
-							<div class="content-container-bounding-box">
-								<div class="content-container">
-									<h1>Irgendne Überschrift ...</h1>
-									<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+								<div class="content-container-bounding-box">
+									<div class="content-container">
+										<h1>Irgendne Überschrift ...</h1>
+										<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+									</div>
 								</div>
-							</div>
-							<div class="content-container-bounding-box">
-								<div class="content-container">
-									<h1>Irgendne Überschrift ...</h1>
-									<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+								<div class="content-container-bounding-box">
+									<div class="content-container">
+										<h1>Irgendne Überschrift ...</h1>
+										<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+									</div>
 								</div>
-							</div>
-							<div class="content-container-bounding-box">
-								<div class="content-container">
-									<h1>Irgendne Überschrift ...</h1>
-									<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+								<div class="content-container-bounding-box">
+									<div class="content-container">
+										<h1>Irgendne Überschrift ...</h1>
+										<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+									</div>
 								</div>
-							</div>
-						</div><!-- content-column-2 -->
-						<div id="content-column-3" class="content-column">
-							<div class="content-container-bounding-box">
-								<div class="content-container">
-									<h1>Col3</h1>
-									<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird. Desoxyribonukleinsäure ist ein wichtiger Bestandteil der Altpapierverwertungszellulosemaschine. Meine Absätze machen Sinn, denn anders geht es eh nicht.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+							</div><!-- content-column-2 -->
+						</div><!-- content-column-bounding-box -->
+						<div class="content-column-bounding-box">
+							<div id="content-column-3" class="content-column">
+								<div class="content-container-bounding-box">
+									<div class="content-container">
+										<h1>Col3</h1>
+										<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird. Desoxyribonukleinsäure ist ein wichtiger Bestandteil der Altpapierverwertungszellulosemaschine. Meine Absätze machen Sinn, denn anders geht es eh nicht.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+									</div>
 								</div>
-							</div>
-							<div class="content-container-bounding-box">
-								<div class="content-container">
-									<h1>Irgendne Überschrift ...</h1>
-									<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+								<div class="content-container-bounding-box">
+									<div class="content-container">
+										<h1>Irgendne Überschrift ...</h1>
+										<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+									</div>
 								</div>
-							</div>
-							<div class="content-container-bounding-box">
-								<div class="content-container">
-									<h1>Irgendne Überschrift ...</h1>
-									<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+								<div class="content-container-bounding-box">
+									<div class="content-container">
+										<h1>Irgendne Überschrift ...</h1>
+										<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
+									</div>
 								</div>
-							</div>
-						</div><!-- content-column-3 -->
+							</div><!-- content-column-3 -->
+						</div><!-- content-column-bounding-box -->
 						<div class="clear-both"></div>
 					</div> <!-- content-grid-container -->
 				</div> <!-- nonfooter-content-container -->
diff --git a/style/main.css b/style/main.css
index eb1ac0a..c2c62a1 100644
--- a/style/main.css
+++ b/style/main.css
@@ -63,15 +63,17 @@ h5 {	font-size: 11pt;	}
 	color: hsla(0, 0%, 100%, 0.95);
 }
 
-.content-column {
+.content-column-bounding-box {
 	float: left;
 	width: 33.3%;
-	margin-top: 1em;
-	margin-bottom: 0em;	
+}
+
+.content-column {
+	padding: 2em 1em 2em 1em;
 }
 
 .content-container-bounding-box {
-	padding: 1em 1em 2em 1em;
+	padding-bottom: 2em;
 }
 
 .content-container {