php search result images show across and fill a CSS div


Tags: php,html,css

Problem :

I'm using dreamweaver and php to return a list of images based on search critiera. I have used Dreamweaver's repeat function and can get the images to repeat below each other (as below).

<table width="100" height="38" border="1"> 
<?php do { ?> 
<tr> 
<td width="38">
<img class='example' src="images/<?php echo $row_getresult['image_name']; ?>.png"/><br>       
</a></td></tr> 
<?php } while ($row_getamenityaccommodation = mysql_fetch_assoc($getamenityaccommodation)); 
?> 
</table>

How can I get the images to go across from each other within a CSS Div e.g. float:left; width:45%; so that if there are more images than what would fit in 45%, the images would continue onto a new line?

Would somehow 'printing' the array work?



Solution :

Remove the table and replace with

<div style='width:45%'>
<?php do{ ?>
<img style='float:left;class='example' src="images/<?php echo $row_getresult['image_name']; ?>.png"/>
<?php } while ($row_getamenityaccommodation = mysql_fetch_assoc($getamenityaccommodation)); ?>
</div>

or for a more semantic version use a ul since you are showing a list of images.

<ul class='gallery'>
<?php do{ ?>
<li><img style='float:left;class='example' src="images/<?php echo $row_getresult['image_name']; ?>.png"/></li>
<?php } while ($row_getamenityaccommodation = mysql_fetch_assoc($getamenityaccommodation)); ?>
 </ul>

and in css

  ul.gallery {
       width: 45%;
       list-style: none;
       margin:0; padding:0;
  }

  ul.gallery li {
       float:left;
       padding: 5px;
  }

    CSS Howto..

    How to style 404 page in WAMP server

    Mapbox GeoJSON loaded via local URL: icons not showing popup properties

    How to load content in a “virtual window” like “LightBox”

    How to absolutely position element against page rather than floated parent?

    Button Built in CSS showing different font color in FF and Webkit

    How can I add my own CSS styles to CKEditor

    How to make background image with aspect ratio in html and css [closed]

    How do you refer to more than one .css file in html?

    How to add css and js files on node pages independent of the theme?

    How to better write complex styles to an element via javascript?

    How to make div to expand vertically without using overflow or javascript or hardcoded values such as margins

    How can I “hack” the Thunderbird Lightning extension to fully color categories

    jQuery + CSS text show not working

    How to load Angular.js form to jsFiddle?

    How prevent inheriting “position: relative” CSS

    How to force style formatting into child tags of

    CSS frustration: How to center floating images of different widths inside LI tags?

    Best practice: How to use (repeat) CSS style attributes correctly?

    How To create slider/toggle to change font size on screen with HTML CSS JS [closed]

    How can I change my code from PHP to HTML?

    How to move div from bottom to top

    using css, how to create a white circle within a transparent div?

    CSS: How to add background-color with background-image under it (same color)

    How to avoid an hover on a menu item to affect the menu items on the right

    How to keep footer at the bottom of the page when resizing on bootstrap

    How to scroll through a div before the page scrolls?

    How to do aspect to fill in img tag?

    How to make responsive horizontal grids? [closed]

    How to keep text in the middle of the screen even when re-sizing page in html/css

    Showing refresh button when animation is complete?