Jump to content

Floats In Seond Row Not Aligned Correcly


son
 Share

Recommended Posts

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

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

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.

Edited by dsonesuk
Link to comment
Share on other sites

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

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

Edited by dsonesuk
Link to comment
Share on other sites

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...