Question

<style>

#container {
  float: left;
  max-width: 900px;
}

.item {
 float: left;
 width: 300px;
}

</style>

<div id="container">

  <div class="item">Much of Text</div>
  <div class="item">Much of Text</div>
  <div class="item">Much of Text</div>
  <div class="item">Much of Text</div>
  <div class="item">Much of Text</div>
  <div class="item">Much of Text</div>
  <div class="item">Much of Text</div>

</div>

I get Mansory working in all situations great:

• with applied to #container max-width property alone
• and float: left alone

But sadly it is not working if apply combo of both float: left & max-width.

1. How to make it working this way and why it is getting not working
   after applying both CSS properties?
2. I need float #container to the left and in the same time need to
   have max-width on it. Is there any possibility to do it somehow? I
   tried use float: left on container’s parents but no luck.

Answer 1

The Masonry #container must be positioned relative, the .masonry-brick elements are positioned absolute by the layout engine – that’s the whole point about Masonry working out the positioning of elements automatically. If you change the positioning of the .masonry-brick elements yourself, you’re putting a spanner in the works. See the documentation and the many examples out there. To change the position of the #container, just observe other examples with Chrome’s devtools to see how with preceding elements, margins and padding you can put it where you want.