Permalink
Browse files

Fixed gutters.

  • Loading branch information...
1 parent 423e240 commit 6ef22eefb1eb30b0dc6b4f6c4ac5ada8d1e59258 Brian Stone committed Apr 5, 2012
Showing with 21 additions and 10 deletions.
  1. +3 −1 example/index.html
  2. +8 −6 example/masonry.css
  3. +10 −3 example/masonry.js
View
@@ -10,6 +10,8 @@
</head>
<body>
<button id="add">Add Box</button>
- <div id="container"></div>
+ <div id="container-wrap">
+ <div id="container"></div>
+ </div>
</body>
</html>
View
@@ -9,20 +9,22 @@ body {
padding-top: 15px;
}
-#container {
+#container-wrap {
+ padding: 10px;
+ padding-bottom: 0;
background-color: black;
- width: 100%;
- padding: 5px;
- margin-top: 15px;
+ margin: 15px 0;
+}
+
+#container {
}
.box {
padding: 5px;
- margin: 5px;
background-color: #ccc;
float: left;
width: 190px;
- box-sizing: border-box;
+ margin-bottom: 10px;
}
.box .close {
View
@@ -6,8 +6,14 @@ $(function () {
};
function create () {
- var close = $('<a>').attr('href', '#').addClass('close').text('Close'),
- $box = $('<div>').addClass('box').lorem(lorem).prepend(close);
+ var close = $('<a>')
+ .attr('href', '#')
+ .addClass('close')
+ .text('Close'),
+ $box = $('<div>')
+ .addClass('box')
+ .append($('<span>').lorem(lorem))
+ .prepend(close);
// Make box resizable
$box.resizable({
@@ -29,7 +35,8 @@ $(function () {
$('#container').masonry({
itemSelector: '.box',
columnWidth: 100,
- isAnimated: true
+ isAnimated: true,
+ gutterWidth: 5
});
add();

0 comments on commit 6ef22ee

Please sign in to comment.