<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>
CSS3 Columns – doctypehtml.net
</title>
<base href="http://doctypehtml.net/">
<link rel="stylesheet" href="http://doctypehtml.net/assets/css/layout.css" type="text/css">
<link rel="stylesheet" href="http://doctypehtml.net/assets/css/mobile.css" type="text/css" media="screen and (max-width: 780px)">
<link href="http://fonts.googleapis.com/css?family=Maven+Pro" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://doctypehtml.net/assets/js/jquery.DOMWindow.js"></script><!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link href="http://doctypehtml.net/css3/columns/css/columns.css" rel="stylesheet" type="text/css">
</head>
<body>
<a href="http://github.com/manuelbieh/doctypehtml.net"><img style="position: absolute; top: 0; right: 0; border: 0;" src=
"https://a248.e.akamai.net/assets.github.com/img/7afbc8b248c68eb468279e8c17986ad46549fb71/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
alt="Fork me on GitHub"></a>
<div id="wrapper">
<header>
<h1>
<a href="/"><!DOCTYPEhtml.net><br>
HTML5/CSS3 Demos + Experiments</a>
</h1>
</header>
<section id="content">
<h2>
CSS3 Columns
</h2>
<h3>
column-width: 240px; column-gap: 10px;
</h3>
<div class="columnwidth">
<p>
<img src="storage/sites/html5.manuelbieh.com/assets/testimage.jpg" style="float: left; margin: 0 5px 5px 0;" alt="">Lorizzle ipsizzle mofo yo amizzle, consectetizzle
adipiscing elizzle. Nullam ghetto velizzle, nizzle volutpizzle, suscipizzle quizzle, gravida vizzle, arcu. Pellentesque fo tortor. Izzle erizzle. Fusce izzle away dapibizzle
turpis tempizzle . Mauris pellentesque nibh izzle turpizzle. Vestibulum izzle tortizzle. Pellentesque eleifend rhoncus nisi. In hac we gonna chung gangster dictumst. Yippiyo
dapibizzle. Sheezy dizzle urna, pretizzle eu, sheezy fo shizzle mah nizzle fo rizzle, mah home g-dizzle, eleifend vitae, nunc. Things suscipizzle. Integer sempizzle hizzle
sizzle tellivizzle.
</p>
<p>
Nunc get down get down ass. Donec ante. Tellivizzle placerat maurizzle izzle lectizzle. Morbi et tortor. Crizzle fo shizzle ass ut mi fo shizzle condimentum. Bling bling
ipsizzle dolor sit izzle, consectetizzle adipiscing elit. Curabitur elizzle fo shizzle, elementizzle funky fresh, eleifend in, mollis for sure, est. Things erizzle volutpat.
Tellivizzle dawg posuere turpis. Suspendisse aliquam. Phat odio yo, i saw beyonces tizzles and my pizzle went crizzle izzle, volutpat daahng dawg, vehicula sizzle,
crackalackin. Fo sizzle orci, congue nec, izzle, commodo ut.
</p>
</div>
<h3>
column-count: 3;
</h3>
<div class="columncount3">
<p>
Lorizzle ipsizzle mofo yo amizzle, consectetizzle adipiscing elizzle. Nullam ghetto velizzle, nizzle volutpizzle, suscipizzle quizzle, gravida vizzle, arcu. Pellentesque fo
tortor. Izzle erizzle. Fusce izzle away dapibizzle turpis tempizzle . Mauris pellentesque nibh izzle turpizzle. Vestibulum izzle tortizzle. Pellentesque eleifend rhoncus nisi.
In hac we gonna chung gangster dictumst. Yippiyo dapibizzle. Sheezy dizzle urna, pretizzle eu, sheezy fo shizzle mah nizzle fo rizzle, mah home g-dizzle, eleifend vitae, nunc.
Things suscipizzle. Integer sempizzle hizzle sizzle tellivizzle.
</p>
<p>
<img src="storage/sites/html5.manuelbieh.com/assets/testimage.jpg" style="float: left; margin: 0 5px 5px 0;" alt="">Nunc get down get down ass. Donec ante. Tellivizzle
placerat maurizzle izzle lectizzle. Morbi et tortor. Crizzle fo shizzle ass ut mi fo shizzle condimentum. Bling bling ipsizzle dolor sit izzle, consectetizzle adipiscing elit.
Curabitur elizzle fo shizzle, elementizzle funky fresh, eleifend in, mollis for sure, est. Things erizzle volutpat. Tellivizzle dawg posuere turpis. Suspendisse aliquam. Phat
odio yo, i saw beyonces tizzles and my pizzle went crizzle izzle, volutpat daahng dawg, vehicula sizzle, crackalackin. Fo sizzle orci, congue nec, izzle, commodo ut.
</p>
</div>
<h3>
column-count: 4;
</h3>
<div class="columncount4">
<p>
Lorizzle ipsizzle mofo yo amizzle, consectetizzle adipiscing elizzle. Nullam ghetto velizzle, nizzle volutpizzle, suscipizzle quizzle, gravida vizzle, arcu. Pellentesque fo
tortor. Izzle erizzle. Fusce izzle away dapibizzle turpis tempizzle . Mauris pellentesque nibh izzle turpizzle. Vestibulum izzle tortizzle. Pellentesque eleifend rhoncus nisi.
In hac we gonna chung gangster dictumst. Yippiyo dapibizzle. Sheezy dizzle urna, pretizzle eu, sheezy fo shizzle mah nizzle fo rizzle, mah home g-dizzle, eleifend vitae, nunc.
Things suscipizzle. Integer sempizzle hizzle sizzle tellivizzle.
</p>
<p>
<img src="storage/sites/html5.manuelbieh.com/assets/testimage.jpg" style="float: left; margin: 0 5px 5px 0;" alt="">Nunc get down get down ass. Donec ante. Tellivizzle
placerat maurizzle izzle lectizzle. Morbi et tortor. Crizzle fo shizzle ass ut mi fo shizzle condimentum. Bling bling ipsizzle dolor sit izzle, consectetizzle adipiscing elit.
Curabitur elizzle fo shizzle, elementizzle funky fresh, eleifend in, mollis for sure, est. Things erizzle volutpat. Tellivizzle dawg posuere turpis. Suspendisse aliquam. Phat
odio yo, i saw beyonces tizzles and my pizzle went crizzle izzle, volutpat daahng dawg, vehicula sizzle, crackalackin. Fo sizzle orci, congue nec, izzle, commodo ut.
</p>
</div>
<h3>
column-rule: 5px solid #9eafbd;
</h3>
<div class="columnrule">
<p>
Lorizzle ipsizzle mofo yo amizzle, consectetizzle adipiscing elizzle. Nullam ghetto velizzle, nizzle volutpizzle, suscipizzle quizzle, gravida vizzle, arcu. Pellentesque fo
tortor. Izzle erizzle. Fusce izzle away dapibizzle turpis tempizzle . Mauris pellentesque nibh izzle turpizzle. Vestibulum izzle tortizzle. Pellentesque eleifend rhoncus nisi.
In hac we gonna chung gangster dictumst. Yippiyo dapibizzle. Sheezy dizzle urna, pretizzle eu, sheezy fo shizzle mah nizzle fo rizzle, mah home g-dizzle, eleifend vitae, nunc.
Things suscipizzle. Integer sempizzle hizzle sizzle tellivizzle.
</p>
<p>
Nunc get down get down ass. Donec ante. Tellivizzle placerat maurizzle izzle lectizzle. Morbi et tortor. Crizzle fo shizzle ass ut mi fo shizzle condimentum. Bling bling
ipsizzle dolor sit izzle, consectetizzle adipiscing elit. Curabitur elizzle fo shizzle, elementizzle funky fresh, eleifend in, mollis for sure, est. Things erizzle volutpat.
Tellivizzle dawg posuere turpis. Suspendisse aliquam. Phat odio yo, i saw beyonces tizzles and my pizzle went crizzle izzle, volutpat daahng dawg, vehicula sizzle,
crackalackin. Fo sizzle orci, congue nec, izzle, commodo ut.
</p>
</div>
<p>
<small>Image taken from <a href="http://www.sxc.hu/photo/684719">http://www.sxc.hu/photo/684719</a></small>
</p><br style="clear: both;">
</section>
</div>
<footer>
<div>
<a href="http://doctypehtml.net/index.html">Overview</a> – All examples are lovingly handcrafted by <a href="http://www.twitter.com/ManuelBieh">@ManuelBieh</a> | <a href=
"http://www.manuel-bieh.de/en/">http://www.manuel-bieh.de</a>. Inspired by <a href="http://www.html5demos.com">html5demos.com</a> from the great <a href=
"http://www.twitter.com/rem">@rem</a> | <a href="http://doctypehtml.net/viewsource/index.php?url=http://doctypehtml.net/css3/columns" class="viewsource">view source</a> | <iframe src=
"http://platform.twitter.com/widgets/tweet_button.html?url=http://doctypehtml.net/&via=manuelbieh" style=
"vertical-align: middle; width: 110px; height: 21px; overflow: hidden; border: 0;"></iframe> <iframe src=
"http://www.facebook.com/plugins/like.php?href=http://doctypehtml.net/&send=false&layout=button_count&width=130&show_faces=false&action=recommend&colorscheme=light&font&height=21"
style="vertical-align: middle; border:none; overflow:hidden; width:130px; height:21px; overflow: hidden; border: 0;"></iframe>
<div class="g-plusone" data-size="medium" data-count="true"></div>
</div>
</footer>
<script>
$('.viewsource').openDOMWindow({
height:'90%',
width:'90%',
positionType:'absolute',
positionTop:50,
eventType:'click',
positionLeft:'5%',
windowSource:'iframe',
windowPadding:0,
loader:1,
// loaderImagePath:'animationProcessing.gif',
loaderHeight:16,
loaderWidth:17
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-16083973-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
</body>
</html>