rgdonohue
1/23/2014 - 4:24 PM
CSS Multi-column Layout
CSS Multi-column Layout
A demonstration of the W3C Candidate Recommendation CSS Multi-column Layout Module. Viewing on a new page allows columns to adjust in a fluid sense, inviting opportunities for implementation in a responsive layout.
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Multi-column Layout</title>
<style>
body {
font-family: sans-serif;
color: #666;
}
h1{
font-weight: normal;
}
#wrapper {
max-width: 90%;
margin: 20px auto;
padding: 10px 15px 20px;
background: white;
}
.columns {
-moz-columns:12em;
-webkit-columns:12em;
columns:12em;
-moz-column-gap: 4em;
-webkit-column-gap: 4em;
column-gap: 4em;
-moz-column-rule: 1px dashed #dadada;
-webkit-column-rule: 1px dashed #dadada;
column-rule: 1px dashed #dadada;
}
p {
margin: 0 0 15px 0;
padding: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Another bacon story</h1>
<section class="columns">
<p>Bacon ipsum dolor sit amet meatball filet mignon shoulder, tenderloin kevin shankle pork tri-tip spare ribs chuck leberkas porchetta frankfurter tail corned beef. Biltong bresaola tri-tip fatback cow pancetta. Jerky ball tip biltong short ribs shankle filet mignon venison bacon kielbasa rump. Rump drumstick flank short ribs, turducken ham hock t-bone turkey pork loin. Ham rump short ribs capicola shank. Flank boudin biltong rump swine ground round tongue tri-tip short ribs capicola tenderloin pig beef ribs. Shankle short loin ham swine prosciutto turducken.</p>
<p>Salami beef rump chuck swine. Turducken pancetta pork prosciutto sausage jerky, doner kevin t-bone brisket pastrami rump ball tip biltong. Pancetta tail pig capicola pork loin, turducken tri-tip. Turducken chuck salami boudin meatball leberkas turkey.</p>
<p>Filet mignon boudin bacon sausage beef, turkey strip steak. Brisket pig hamburger short loin doner shank turducken bacon turkey andouille beef ribs landjaeger jowl sirloin ribeye. Doner andouille boudin, t-bone bacon tenderloin swine jerky. Flank meatloaf strip steak leberkas tail pork chop jowl pork loin beef frankfurter. Ground round prosciutto strip steak, pork loin bacon spare ribs bresaola tri-tip fatback jerky biltong shankle brisket. Ground round brisket bacon drumstick jerky shoulder.</p>
<p>Kevin capicola tri-tip ball tip, spare ribs pork chop tenderloin frankfurter meatball short ribs sausage fatback shankle corned beef. Brisket venison pastrami kevin capicola t-bone turkey filet mignon. Swine biltong pancetta turkey, fatback hamburger meatball. Pig bacon doner ham hock, ham pastrami kevin biltong tenderloin.</p>
</section>
</div>
</body>
</html>