Skip to content

Instantly share code, notes, and snippets.

@nfreader

nfreader/responsive-borders.html

Created March 19, 2012 18:24
Show Gist options
  • Save nfreader/2122814 to your computer and use it in GitHub Desktop.
Save nfreader/2122814 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
responsive-borders.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
background: #eee;
}
.row::before, .row::after {
display: table;
content: "";
}
.row::after {
clear: both;
}
.row {
margin-left: -20px;
}
.container {
width: 940px;
margin: 0px auto;
background: white;
border: 1px solid black;
}
div[class*="span"] {
background: #eee;
padding: 20px;
text-align: center;
}
div[class*="span"] {
float: left;
border: 1px solid black;
margin-left: 20px;
}
.row {
margin-bottom: 20px;
}
.row > [class*="span"]:first-child {
margin-left: 19px;
}
.row > [class*="span"]:last-child {
margin-right: -1px;
}
.span1 {
width: 60px;
}
.span2 {
width: 140px;
}
.span3 {
width: 220px;
}
.span4 {
width: 300px;
}
.span5 {
width: 380px;
}
.span6 {
width: 460px;
}
.span7 {
width: 540px;
}
.span8 {
width: 620px;
}
.span9 {
width: 700px;
}
.span10 {
width: 780px;
}
.span11 {
width: 860px;
}
.span12 {
width: 940px;
}
</style>
<title></title>
</head>
<body>
<div class="container">
<div class="row">
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
</div>
<div class="row">
<div class="span2">2</div>
<div class="span2">2</div>
<div class="span2">2</div>
<div class="span2">2</div>
<div class="span2">2</div>
<div class="span2">2</div>
</div>
<div class="row">
<div class="span3">3</div>
<div class="span3">3</div>
<div class="span3">3</div>
<div class="span3">3</div>
</div>
<div class="row">
<div class="span4">4</div>
<div class="span4">4</div>
<div class="span4">4</div>
</div>
<div class="row">
<div class="span5">5</div>
<div class="span5">5</div>
<div class="span2">2</div>
</div>
<div class="row">
<div class="span6">6</div>
<div class="span6">6</div>
</div>
<div class="row">
<div class="span7">7</div>
<div class="span5">5</div>
</div>
<div class="row">
<div class="span8">8</div>
<div class="span4">4</div>
</div>
<div class="row">
<div class="span9">9</div>
<div class="span3">3</div>
</div>
<div class="row">
<div class="span10">10</div>
<div class="span2">2</div>
</div>
<div class="row">
<div class="span11">11</div>
<div class="span1">1</div>
</div>
<div class="row">
<div class="span12">12</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment