Skip to content

Instantly share code, notes, and snippets.

@arielsalminen

arielsalminen/2col_masonry_layout.html

Last active October 15, 2016 21:22
Show Gist options
  • Save arielsalminen/5004354 to your computer and use it in GitHub Desktop.
Save arielsalminen/5004354 to your computer and use it in GitHub Desktop.
Download ZIP
Easily turn simple 1-column layout into a fluid 2-column masonry layout without JS plugins. Works even in IE6! Check the live example here: http://viljamis.com/columns/
Raw
2col_masonry_layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>2-column fluid masonry layout without JS plugins</title>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style>
body {
text-align: center;
padding: 3% 8%;
}
section {
display: block;
width: 100%;
margin: 5% auto;
}
article {
display: block;
width: 49%;
margin: 0 0 2%;
background: #999;
height: 300px;
float: left;
clear: left;
}
article.right {
float: right;
clear: right;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
// Thanks to Mark Avery
// http://stackoverflow.com/questions/8191015/how-do-i-lay-out-my-content-divs-in-a-similar-manner-to-facebook-timeline
var adjustArticleHeights = (function () {
var leftColumnHeight = 0,
rightColumnHeight = 0,
$articles = $('section article');
for (var i = 0; i < $articles.length; i++) {
// This just adds random heights to articles
$articles.eq(i).height(Math.floor(Math.random() * 300) + 10);
if (leftColumnHeight > rightColumnHeight) {
rightColumnHeight += $articles.eq(i).addClass('right').outerHeight(true);
} else {
leftColumnHeight += $articles.eq(i).outerHeight(true);
}
}
return $articles;
})();
});
</script>
</head>
<body>
<h1>2-column fluid masonry layout without JS plugins</h1>
<p>Easily turn simple 1-column layout into a fluid 2-column masonry layout without JS plugins. Works even in IE6! <a href="https://gist.github.com/viljamis/5004354">View the source code</a></p>
<section>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment