Footer at bottom

dabblet.css

/**
 * Footer at bottom
 * original found at: http://peterned.home.xs4all.nl/examples/csslayout1.html
 */

/* import normalize css */
@import url("http://raw.github.com/necolas/normalize.css/master/normalize.css");

/* import fonts */
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic|Yanone+Kaffeesatz:400,700);

html * { font-size: 100%; }

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	font-size: 87.50%;
	font-family: "Droid Serif", Georgia, serif;
	color: #333;
}

.ym-wrapper {
	position: relative; /* needed for footer positioning*/
	width: 960px;

	height: auto !important; /* real browsers */
	height: 100%; /* IE6: treaded as min-height*/
	min-height: 100%; /* real browsers */

	margin: 0 auto;
	background: #f0f0f0;
}
.ym-wbox {
	padding: 20px;
}

#main {
	padding-bottom: 3em;
}

#footer {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	background: #ccc;
}
#footer p {
	margin: 0;
	padding: 0 20px;
	line-height: 3em;
}

/* some content styling */
h1,h2,h3,h4,h5,h6 {
	margin: 1.5em 0 0 0;
	line-height: 1.5em;
	text-shadow: 0 2px 1px #fff;
}
h1 {
	font-size: 200%;
}
h2 {
	font-size: 157.142857142857%; /* 22px */
	line-height: 0.95454545454545em;
	margin-top: 0.95454545454545em;
}
h3 {
	font-size: 128.571428571429%; /* 18px */
	line-height: 1.16666666666667em;
	margin-top: 1.16666666666667em;
}
#header {
	padding-bottom: 1em;
	border-bottom: 1px solid #fff;
	box-shadow: 0 1px 0 #ccc;
}
#header h1 {
	margin: 0;
	font-size: 300%;
	font-family: 'Yanone Kaffeesatz', Helvetica, Arial, verdana, sans-serif;
}
#header p {
	font-size: 114.285714285714%; /* 16px */
}
p {
	font-size: 1em;
	margin: 1.5em 0 0 0;
	line-height: 1.5em;
}
a {
	color: #3B5998;
}

dabblet.html

<div class="ym-wrapper">
	<div class="ym-wbox">
		<header id="header" role="banner">
			<h1>CSS layout: 100% height with header and footer</h1>
			<p>
				Sometimes things that used to be really simple with tables can still appear
				pretty hard with CSS. This layout for instance would consist of 3 cells;
				two with a fixed height, and a third one in the center filling up the remaining space.
				Using CSS, however, you have to take a different approach.
			</p>
		</header>
		<section id="main" role="main">
			<a id="content"></a>
			<h2>Min-height</h2>
			<p>The .ym-wrapper element of this page has a min-height of 100%.
			That way, if the content requires more height than the viewport provides,
			the height of #main forces .ym-wrapper to become longer as well.
			Possible columns in .ym-wrapper can then be visualised with a background image
			on .ym-wrapper; divs are not table cells, and you don't need (or want)
			the fysical elements to create such a visual effect. If you're not yet
			convinced; think wobbly lines and gradients instead of straight lines
			and simple color schemes.</p>
			<h2>Relative positioning</h2>
			<p>Because .ym-wrapperhas a relative position, #footer will always remain at its bottom;
			since the min-height mentioned above does not prevent ..ym-wrapper from scaling,
			this will work even if (or rather especially when) #main forces #container to become
			longer.</p>
			<h2>Padding-bottom</h2>
			<p>Since it is no longer in the normal flow, padding-bottom of #main now provides the space
			for the absolute #footer. This padding is included in the scrolled height by default,
			so that the footer will never overlap the above content.Scale the text size a bit or
			resize your browser window to test this layout.</p>
			<p>Original: <a href="http://peterned.home.xs4all.nl/examples/csslayout1.html" target="_blank">http://peterned.home.xs4all.nl/examples/csslayout1.html</a>
		</section>
		<footer id="footer" role="contentinfo">
			<p>&copy; 2012 &#124; MIT license
		</footer>
	</div>
</div>

settings.json

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