Fixed gutters.

stonebk · Apr 5, 2012 · 6ef22ee · 6ef22ee
1 parent 423e240
commit 6ef22ee
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 10 deletions.
diff --git a/example/index.html b/example/index.html
@@ -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>
diff --git a/example/masonry.css b/example/masonry.css
@@ -9,20 +9,22 @@ body {
     padding-top: 15px;
 }
 
-#container {
+#container-wrap {
+    padding: 10px;
+    padding-bottom: 0;
     background-color: black;
-    width: 100%;
+    margin: 15px 0;
-    padding: 5px;
+}
-    margin-top: 15px;
+
+#container {
 }
 
 .box {
     padding: 5px;
-    margin: 5px;
     background-color: #ccc;
     float: left;
     width: 190px;
-    box-sizing: border-box;
+    margin-bottom: 10px;
 }
 
 .box .close {

diff --git a/example/masonry.js b/example/masonry.js
@@ -6,8 +6,14 @@ $(function () {
     };
 
     function create () {
-        var close = $('<a>').attr('href', '#').addClass('close').text('Close'),
+        var close = $('<a>')
-            $box = $('<div>').addClass('box').lorem(lorem).prepend(close);
+                .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();