Css height: auto; masonry.js (pinterest layout) problem

Hello all,

I am trying to make a pinterest layout for my blog/image index page. I am using masonry.js to do so. I have made a few test versions with fixed heights and it works beautifully, but when I set the height: auto; I get the images over lapping on each other. I need to set it to auto because I will be having users submitting images to the site.

img {
	margin-top: 20px;
	height: auto;
	width:280px;
}
	</style>
</head>
	<body>
	<header id=&quot;header&quot;>
	</header>
	<div class=&quot;container_24 contain&quot;>
		<div class=&quot;grid_6&quot;>
			<img src=&quot;&quot; width=&quot;500&quot; height=&quot;700&quot;>
		</div>
		<div class=&quot;grid_6&quot;>
			<img src=&quot;&quot; width=&quot;821&quot; height=&quot;410&quot;>
		</div>
		<div class=&quot;grid_6&quot;>
			<img src=&quot;&quot; width=&quot;546&quot; height=&quot;410&quot;>
		</div>
		<div class=&quot;grid_6&quot;>
			<img src=&quot;&quot; width=&quot;500&quot; height=&quot;700&quot;>
		</div>
		<div class=&quot;grid_6&quot;>
			<img src=&quot;&quot; width=&quot;500&quot; height=&quot;700&quot;>
		</div>
		<div class=&quot;grid_6&quot;>
			<img src=&quot;&quot; width=&quot;821&quot; height=&quot;410&quot;>
		</div>
		<div class=&quot;grid_6&quot;>
			<img src=&quot;&quot; width=&quot;546&quot; height=&quot;410&quot;>
		</div>

	</div>	

	<script>
		$(&quot;.contain&quot;).masonry();
	</script>
	</div><!--container -->
	</body>

Note my jquery/js skills are extremely rusty and I am using 960 grids and a css reset

Thank you all for your help :smiley:,
Corbin