title: How to make an Isotope gallery stretch the surrounding container?
body: <p>I have an <a href="https://isotope.metafizzy.co" rel="nofollow noreferrer">Isotope</a> masonry gallery. It's totally run-of-the-mill, nothing special:</p>
  
  <p><a href="https://i.stack.imgur.com/ZAYZr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZAYZr.png" alt="enter image description here"></a></p>
  
  <p>Now internally, Isotope positions the elements inside the gallery using <code>position: absolute</code> (like probably every other masonry library out there):</p>
  
  <p><a href="https://i.stack.imgur.com/19igT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/19igT.png" alt="enter image description here"></a></p>
  
  <p>The problem is that the <code>&lt;ul&gt;</code> surrounding the Isotope elements is <em>not</em> resized as the masonry elements are positioned This means that any elements coming after the <code>&lt;ul&gt;</code> do not get pushed down, below the masonry gallery, and the gallery elements overlap the stuff beneath it.</p>
  
  <p>This could be fixed by giving the footer (which is just a dumb HTML element right now) some jQuery magic, but I'd like to avoid that.</p>
  
  <p>Is there a way to quickly get the Isotope masonry gallery's height and apply it to the surrounding <code>&lt;ul&gt;</code> element, to make the layout work as expected? </p>