Holy grail large padding
http://en.wikipedia.org/wiki/Holy_Grail_(web_design)
by kuyabiye
HTML
<div class="container">
<section>
<h1>This is the title</h1>
<p><a id="test">Nullam</a> accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae in ac dui quis mi consectetuer lacinia. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui.
</p>
<form>
<div>
<input type="text" />
</div>
<div>
<input type="text" />
</div>
<div>
<input type="text" />
</div>
<div>
<input type="text" />
</div>
</form>
<p><a id="test">Nullam</a> accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae in ac dui quis mi consectetuer lacinia. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui.
</p>
<p><a href="#test">Click me!</a></p>
</section>
<aside>
testing
</aside>
</div>
CSS
.container {
overflow:hidden;
background-color: #eee;
border: 3px solid #333;
position: relative;
width: 450px;
}
h1 { font-size: 28px }
p {
margin: 15px 0;
}
section {
float:left;
width: 325px;
}
aside {
float: right;
border-left: 1px solid #CACACA;
border-radius: 0 4px 4px 0;
width: 100px;
background: whiteSmoke;
right: 0;
top:0;
position: absolute;
margin-bottom: -8000px;
padding-bottom: 8000px;
}