Isotope elements do not auto height

Question

So I am making a simple page with Isotope (I've used it before) and this is what I want it to do:

• each element should adjust his height to it's inner content on all items
• all elements need to be the same width, 4 in a row (established this)
• it needs to fit in a 960px width div (established this)
• the first element should be as wide as two normal elements (established this)
• the last element should have a different background color and border-radius (established this)

The only thing not working is the auto height to the content. I have super simple code:

HTML

<section id="content">
    <div id="container" class="super-list variable-sizes clearfix">
        <div class="element width2">
            Dummy text Dummy text Dummy text Dummy text Dummy text
        </div>
        <div class="element">
            <img src="img/img.jpg" alt="" title="" width="200px" height="300px" /><br />
          <a href="#" target="_blank">Link</a>
        </div>
        <div class="element">
             <a href="#" target="_blank">link</a>
        </div>
        <div class="element">
            Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text
        </div>
        <div class="element">
            <img src="img/img.jpg" alt="" title="" width="200px" height="400px" /><br />
        </div>
            <div class="element">
            <img src="img/img.jpg" alt="" title="" width="200px" height="300px" /><br />
          <a href="#" target="_blank">Link</a>
        </div>
        <div class="element">
             <a href="#" target="_blank">link</a>
        </div>
        <div class="element">
            Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text
        </div>
        <div class="element">
            <img src="img/img.jpg" alt="" title="" width="200px" height="900px" /><br />
        </div>
        <div class="element">
            <img src="img/img.jpg" alt="" title="" width="200px" height="100px" /><br />
          <a href="#" target="_blank">Link</a>
        </div>
        <div class="element">
             <a href="#" target="_blank">link</a>
        </div>
        <div class="element">
            Dummy text Dummy text Dummy Dummy text Dummy text Dummy text
        </div>
        <div class="element vanmij">
            <img src="img/img.jpg" alt="" title="" width="200px" height="400px" /><br />
        </div>
    </div>
</section>

And here is my javascript:

<script>    
    $(window).load(function(){
            var $container = $('#container');
            $container.imagesLoaded( function(){ <- I have no idea what this is, sorry!
                $container.isotope({
                    masonry: {
                        columnWidth: 240
                    },
                });
            });
        });         
    </script>

And my CSS:

/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item {
z-index: 2;
}

.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}

.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}

.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property:    -moz-transform, opacity;
-ms-transition-property:     -ms-transform, opacity;
-o-transition-property:      -o-transform, opacity;
transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}

/* End: Recommended Isotope styles */



/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}


/**** Base styles ****/

body {
background: url(img/bg.jpg) fixed no-repeat;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}

/**** Isotope styles ****/

/* required for containers to inherit vertical size from window */


#container {
margin-bottom: 20px;
width: 960px;
margin: 0 auto;
}

h1.title {
background: none repeat scroll 0 0 #73BD1E;
color: #FFFFFF;
display: inline-block;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
font-weight: 300; 
font-weight: bold;
margin: 0 auto 10px;
padding: 5px;
text-transform: uppercase;
display: inline-block;
margin: 25px auto;
}

.element {
width: 200px;
margin: 5px;
float: left;
overflow: hidden;
position: relative;
color: #222;
background-color: #FFFFFF;
-webkit-box-shadow: 2px 2px 5px rgba(136, 136, 136, 0.8);
-moz-box-shadow:    2px 2px 5px rgba(136, 136, 136, 0.8);
box-shadow:         2px 2px 5px rgba(136, 136, 136, 0.8);
font-family: Helvetica Neue,Arial;
font-size: 10pt;
opacity: 0.7;
padding: 15px;  
}

p {
color: #333333;
font: 12px/16px Verdana,Geneva,Arial,Helvetica,sans-serif;
margin: 10px 0;
}

.element * {
position: absolute;
margin: 0;
}


.variable-sizes .element.width2 { width: 440px; }


.vanmij { background-color:#090;-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; color: #fff; opacity:1;}


.element img {
display: inline-block;
opacity: 1.0;
}



/**** Infinite Scroll ****/

#infscr-loading {
position: fixed;
text-align: center;
bottom: 30px;
left: 42%;
z-index: 100;
background: white;
background: hsla( 0, 0%, 100%, 0.9 );
padding: 20px;
color: #222;
font-size: 15px;
font-weight: bold;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
 border-radius: 10px;
}



/* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

Answer 1

Okay got it, I just had to remove the .element * { position: absolute; margin: 0; } from the stylesheet!