HTML, CSS: how can I merge these divs in order to use float:left property on their children ?
Posted
by Patrick
on Stack Overflow
See other posts from Stack Overflow
or by Patrick
Published on 2010-06-01T11:02:46Z
Indexed on
2010/06/01
11:53 UTC
Read the original article
Hit count: 166
hi,
I've 2 sets of thumbnails and in each set I'm displaying them one nearby each other in 4 columns using float:left.
I would like to "merge" the 2 sets (but I cannot change the html code) because I want the thumbnails of the second set floating right after the last thumbnail of the first set.
In other terms, if in the last row there are only 2 thumbnails and the last 2 columns are empty, the thumbnails of the second set should fill the empty columns of the last row of the first set.
This is the code...
<div class="field field-type-filefield field-field-image">
<div class="field-items">
<div class="field-item odd">
<a rel="lightbox[field_image][First image<br /><br /><a href="/lancelmaat/content/stalkshow" id="node_link_text" class="active">View Image Details</a>]" href="http://localhost/lancelmaat/sites/default/files/files/projects/Stalkshow/images/LPrisPetjong.jpeg" class="lightbox-processed"><img width="89" height="89" title="" alt="First image" src="http://localhost/lancelmaat/sites/default/files/imagecache/galleryImage/files/projects/Stalkshow/images/LPrisPetjong.jpeg"></a> </div>
<div class="field-item even">
<a rel="lightbox[field_image][Second image<br /><br /><a href="/lancelmaat/content/stalkshow" id="node_link_text" class="active">View Image Details</a>]" href="http://localhost/lancelmaat/sites/default/files/files/projects/Stalkshow/images/SeoulLEDScreen2a.jpeg" class="lightbox-processed"><img width="89" height="89" title="" alt="Second image" src="http://localhost/lancelmaat/sites/default/files/imagecache/galleryImage/files/projects/Stalkshow/images/SeoulLEDScreen2a.jpeg"></a> </div>
<div class="field-item odd">
<a rel="lightbox[field_image][Third image<br /><br /><a href="/lancelmaat/content/stalkshow" id="node_link_text" class="active">View Image Details</a>]" href="http://localhost/lancelmaat/sites/default/files/files/projects/Stalkshow/images/SeoulSKT6.jpeg" class="lightbox-processed"><img width="89" height="89" title="" alt="Third image" src="http://localhost/lancelmaat/sites/default/files/imagecache/galleryImage/files/projects/Stalkshow/images/SeoulSKT6.jpeg"></a> </div>
</div>
<!-- second set -->
<div class="field field-type-filefield field-field-video">
<div class="field-items">
<div class="field-item odd">
<a rel="lightbox[field_video][Video Number 1<br /><br /><a href="/lancelmaat/content/stalkshow" id="node_link_text" class="active">View Image Details</a>]" href="http://localhost/lancelmaat/sites/default/files/files/projects/Stalkshow/videos/StalkSeoul8d1Mbps.flv" class="lightbox-processed"><img title="" alt="Video Number 1" src="http://localhost/lancelmaat/sites/default/files/imagecache/galleryVideo/files/projects/Stalkshow/videos/StalkSeoul8d1Mbps.flv"></a> </div>
<div class="field-item even">
<a rel="lightbox[field_video][Video Number 2<br /><br /><a href="/lancelmaat/content/stalkshow" id="node_link_text" class="active">View Image Details</a>]" href="http://localhost/lancelmaat/sites/default/files/files/projects/Stalkshow/videos/stalkshowdvd21Mbps.flv" class="lightbox-processed"><img title="" alt="Video Number 2" src="http://localhost/lancelmaat/sites/default/files/imagecache/galleryVideo/files/projects/Stalkshow/videos/stalkshowdvd21Mbps.flv"></a> </div>
<div class="field-item odd">
<a rel="lightbox[field_video][Video Number 3<br /><br /><a href="/lancelmaat/content/stalkshow" id="node_link_text" class="active">View Image Details</a>]" href="http://localhost/lancelmaat/sites/default/files/files/projects/Stalkshow/videos/StalkShowMoscow1Mbps.flv" class="lightbox-processed"><img title="" alt="Video Number 3" src="http://localhost/lancelmaat/sites/default/files/imagecache/galleryVideo/files/projects/Stalkshow/videos/StalkShowMoscow1Mbps.flv"></a> </div>
</div>
</div>
How can I merge these divs in order to use float:left property on their children ?
thanks
© Stack Overflow or respective owner
