son Posted August 25, 2009 Share Posted August 25, 2009 I float divs to display image and heading of products. The image sizes vary. I had the issue that afer first row sometimes divs would not start at left as some images and therefore divs were quite short. The first div from next row 'slid' in next line directly under the shorter div from previous line. To remedy I used a specified height for div which made each following line start right at left side. Now the problem with those is that if you have a lot of short divs it kind of looks ridiculous how much space there is above the image and heading. Is there any other way to make sure all divs start right at left side without specifying any height?Son Link to comment Share on other sites More sharing options...
Ingolme Posted August 25, 2009 Share Posted August 25, 2009 To make something go below a floated element, use the clear property: <div style="clear: left;"> Link to comment Share on other sites More sharing options...
son Posted August 26, 2009 Author Share Posted August 26, 2009 To make something go below a floated element, use the clear property:<div style="clear: left;"> But then I do not know which element needs to clear? The data comes from database and depending on image size there could be 3 to 6 images in one row. Can this dynamically be done?Son Link to comment Share on other sites More sharing options...
dsonesuk Posted August 26, 2009 Share Posted August 26, 2009 why don't you specify width instead, so you can control how many images appear in a row?while they are being read from the database, count them, and on the sixth image, add the <div style="clear: left;"> at the end, and at the sametime reset the count to 0. Link to comment Share on other sites More sharing options...
son Posted August 26, 2009 Author Share Posted August 26, 2009 why don't you specify width instead, so you can control how many images appear in a row?while they are being read from the database, count them, and on the sixth image, add the <div style="clear: left;"> at the end, and at the sametime reset the count to 0.Do you count on $row? Sorry, I have not done this before...Son Link to comment Share on other sites More sharing options...
dsonesuk Posted August 26, 2009 Share Posted August 26, 2009 rough guide, something similar to this$countthis=0;while {......echo "<div style=\"float:left;\">";echo "<img src=".$myrow['image']." width="setwidth" />echo "</div>";$countthis++;if ($countthis > 5){echo "<div style=\"clear: left;\">";$counthis=0;}}//end while Link to comment Share on other sites More sharing options...
son Posted August 26, 2009 Author Share Posted August 26, 2009 This works fine for count. Just now taking out the height another issue arose. Inside the divs I have another div with absolute positioning to make sure all contents are always aligned to bottom. Taking out the height for parent div messes up the div display. Is there another way to align all content to bottom of floated div (image and heading level 4)?Son Link to comment Share on other sites More sharing options...
dsonesuk Posted August 26, 2009 Share Posted August 26, 2009 you will have to create an inner container div for the img div and images, and the bottom headings div will have to be display on the outside of this inner div and will match width and float of img div, inside the outer div see below.img_row {width: 990px; overflow:hidden;}.img_cell, .heading {width: 158px; float:left; margin: 2px; }.heading {font-weight:bolder; text-align:center; }.img_cell img {width: 156px; vertical-align:middle;}.inner { overflow:hidden;}<div class="img_row"><div class="inner"><!--while loop to enter div and images here--><div class="img_cell"><img src="image1.gif" /></div><div class="img_cell"><img src="image2.png" /></div><div class="img_cell"><img src="image3.jpg" /></div><div class="img_cell"><img src="image4.jpg" /></div><div class="img_cell"><img src="image5.gif" /></div><div class="img_cell"><img src="image6.png" /></div></div><!--inner--><!--while loop to enter div and headings here--><div class="heading">Pic 01 Heading</div><div class="heading">Pic 02 Heading</div><div class="heading">Pic 03 Heading</div><div class="heading">Pic 04 Heading</div><div class="heading">Pic 05 Heading</div><div class="heading">Pic 06 Heading</div></div><!--img_row (outer)-->php solution<div class="img_row"> <div class="inner"><?php$countthis=0;$totalcount=0;$heading="";while {...echo <div class="img_cell"><img src=\"".myrow['image']."\" /></div>\n";$heading .= "<div class=\"heading\">".myrow['image']."</div>\n";$countthis++;$totalcount++;if ($countthis > 5 || $totalcount== mysql_num_rows($result)) // or if total images ??????? { echo "</div>\n"; echo $heading; echo "</div>\n"; $counthis=0; $heading=""; if ($totalcount != mysql_num_rows($result)) { echo "<div class=\"img_row\">\n"; echo "<div class=\"inner\">\n"; } }} ?> Link to comment Share on other sites More sharing options...
son Posted August 28, 2009 Author Share Posted August 28, 2009 Thanks, will have a go...Son Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.