Controlling Single Masonry Item Position

Question

I'm using masonry layout in WordPress so my local site's masonry layout is put together with loops. I've created a fiddle to explain my question.

How do I control the positioning of one item within a masonry layout?

I want a div to always be at the top right of the masonry container (to the right of my top left corner stamp)

How do I override the positioning that masonry assigns its .box items?

#container { max-width:635px; width:100%; }
.corner-stamp { background:gray;  width: 90px; height: 90px; }

.box {
  width: 90px;
  height: 90px;
  margin: 5px;
  background: #6AD;
  float: left;
}

/* I want to freely position this item with css */
#biggerBlock{ 
  width: 395px;
  height: 200px;
  background: #6AD;
  left:25%; /* overidden by masonry */
}

.box.large {
  background: #084;
  z-index: 2;
}

UPDATE:

David Desandro answered the question on the official Masonry Git page. The new isotope v2 will have this feature with the ability to include 2 corner-stamps. Thanks for the downvote.

Answer 1

There is no cornerStampSelector property in pure masonry now. You can use stamp option:

Specifies which elements are stamped within the layout. These are special layout elements which will not be laid out by Masonry. Rather, Masonry will layout item elements below stamped elements.

$container.masonry({
    columnWidth: 100,
    animate: true,
    stamp: '#biggerBlock'
  });

And stamp method:

Stamp the elements in the layout. Masonry will lay out item elements around stamped elements.

$container.masonry('stamp',$('#biggerBlock'));