CODEWITHSUNDEEP
jqueryhtmlcssjquery-masonry
andrew
andrew

Reputation: 436

Masonry float:left & max-width

<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:

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.

Upvotes: 2

Views: 3734

Answers (1)

Systembolaget
Systembolaget

Reputation: 2514

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.

Upvotes: 1

Related Questions