Having an issue with the jQuery Shapeshift plugin. Trying to arrange blue, green, and yellow blocks in a single row, but Shapeshift is not cooperating. Any ideas on what could be causing this and how to fix it?
Here's the HTML:
<div class="container">
<div class="block1"></div>
<div class="block2"></div>
<div class="block3"></div>
<div class="block4"></div>
</div>
Here's the CSS:
.container {
border: 1px dashed #ccc;
position: relative;
width: 100%;
}
.container .ss-placeholder-child {
background: transparent;
border: 1px dashed red;
}
.block1 {
width: 600px;
height: 600px;
background: yellow;
position: absolute;
}
.block2 {
width: 600px;
height: 300px;
background: red;
position: absolute;
}
.block3 {
width: 300px;
height: 600px;
background: green;
position: absolute;
}
.block4 {
width: 300px;
height: 600px;
background: blue;
position: absolute;
}
Here's the JS:
$(".container").shapeshift({
minColumns: 1
});
Check out the code on JSFiddle: http://jsfiddle.net/odu70g2t/2/