Skip to content

Instantly share code, notes, and snippets.

@wadtech

wadtech/index.html

Last active August 29, 2015 14:18
Show Gist options
  • Save wadtech/5f616ac98354d409ba5e to your computer and use it in GitHub Desktop.
Save wadtech/5f616ac98354d409ba5e to your computer and use it in GitHub Desktop.
Download ZIP
Nightmarish floaty layout thing: Doing this sort of layout gets me every time// source http://jsbin.com/natusu
Raw
index.html
<html>
<head>
<meta name="description" content="Doing this sort of layout gets me every time">
<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
<meta charset="utf-8">
<title>Nightmarish floaty layout thing</title>
</head>
<body>
<section>
<article class="twentyfive"></article>
<article class="twentyfive"></article>
<article class="twentyfive"></article>
<article class="twentyfive"></article>
</section>
<section>
<article class="twentyfive"></article>
<article class="twentyfive"></article>
<article class="sixteen"></article>
<article class="sixteen"></article>
<article class="sixteen"></article>
</section>
</body>
</html>
Raw
jsbin.natusu.css
section {
width: 100%;
height: 250px;
background: orange;
}
article {
background-color: aqua;
height: 100%;
float:left;
}
.twentyfive {
width: 25%;
}
.sixteen {
width: 16.667%;
}
Raw
jsbin.natusu.js
var articles = document.querySelectorAll('article');
for (var i = 0; i < articles.length; ++i) {
articles[i].style['background-color'] = '#' + Math.floor(Math.random() * 16777215).toString(16);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment