I've been trying to solve this issue for days and I'm completely stumped, any help would be greatly appreciated :(
Using Drupal (and Views) to create a page layout of images in a grid format. Each image has a set width of 150px with an automatically determined height.
The desired effect is to have the images overlap directly on top of each other, similar to Tumblr's style, rather than having gaps between them as currently displayed in the table structure below:
Is it possible to achieve this without using tables? If so, how can I maintain the grid layout while ensuring the images stack neatly on top of each other?
Your assistance would be hugely appreciated. Thank you!
<table id="container" class="views-view-grid cols-6">
<tbody>
<tr class="block">
<td class="col-1 col-first">
<div class="views-field views-field-field-image-pin">
<div class="field-content ptpageimg">
<div data-edit-id="node/3643/field_image_pin/und/_custom_views">
<div class="field-item">
<div class="domeimageo">
<a href="/members/ptarticle/woolie-003-0">
<img class="pthover" src="/files/styles/150x200/public/images/pinpage/760_w2.jpg?itok=_ux-EGvz" width="150" height="200" alt="" />
</a>
<a href="/ptarticle/woolie-003-0" target="_self">
<p class="pttext">Woolie 003</p>
</a>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="col-2">
<div class="views-field views-field-field-image-pin">
<div class="field-content ptpageimg">
<div data-edit-id="node/3642/field_image_pin/und/_custom_views">
<div class="field-item">
<div class="domeimageo">
<a href="/members/ptarticle/085">
<img class="pthover" src="/default/files/styles/150x200/public/images/pinpage/tumblr_mohhz9Ce001sor33mo1_1280.jpg?itok=4wFQzr_h" width="150" height="200" alt="" />
</a>
<a href="/ptarticle/085" target="_self">
<p class="pttext">085</p>
</a>
</div>
</div>
</div>
</div>
</div>
</td>