Momenteel ben ik bezig met een thema welke gebruikt maakt van de Jquery plugin genaamd Masonry. De plugin maakt het mogelijk om elementen op een mooie manier te ‘floaten’ zonder dat er grote gaten ontstaan, wat bij een normale css-float wel gebeurd.

Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

Met deze Jquery plugin worden alle ‘post thumbnails’ in mijn thema naadloos op elkaar gestapeld. Naadloos is het idee, maar er zit onder elke afbeelding ca. 3 pixels die niet weg te krijgen zijn. Zie hier een voorbeeld van de website.

Zodra ik de afbeeldingen vervang met een ‘div’ werkt alles naar behoren. Alle margins en paddings zijn 0. Afbeeldingen binnen in <div class="box"> is het probleem. Heeft iemand hier ervaring mee en een mogelijke oplossing?

Zie mijn onderstaande code.

index.php

<div id="wrapper"> 	<?php if (have_posts()) : while (have_posts()) : the_post(); ?> 		<div class="box">         	<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >             	<!-- TEST DIV.                 <div style="width:420px; height:233px; background-color:#FC0;"></div>             	--> 			<?php the_post_thumbnail('full', array('class' => 'thumb')); ?>                 <span class="thumb-slide">                     <ul>                         <li><?php the_title(); ?></li>                         <li><?php the_subtitle() ?></li>                     </ul>                 </span>              </a> 		</div> 	<?php endwhile; ?> 	<?php else : ?> 		<h2>Not Found</h2> 	<?php endif; ?> </div>

bijbehorende CSS

#wrapper { 	padding: 0; 	margin-top: 20px; 	margin-right: 20px; 	margin-bottom: 80px; 	margin-left: 20px; 	} .box {   float: left;   margin: 0px;   padding: 0px; 	} .box img { 	margin: 0px; 	padding: 0px; 	overflow: hidden; 	} .thumb { 	margin: 0px; 	padding: 0px; 	}