Bradley Cousins Bradley Cousins - 1 year ago 61
HTML Question

Equally spacing PHP generated divs (Not using flex)

I have a image box which i want to randomly display images stored in my images file using PHP, this portion works fine, my issue is that i need to make the images equally spaced to fill the width of the site.

This is what it currently looks like :

enter image description here

I have put a red line to the right, this is where i need the divs to reach.

I have tried using a flex method to do this however it just squeezes all divs when the page is shrunk, this i dont like as i plan to be making the site responsive.

Currently i have started to implement the span stretch way of doing it, however this doesnt seem to work.

Here is my HTML :

<div id="tile_wrapper">


$res = $conn->query("SELECT * FROM randomimg ORDER BY RAND() LIMIT 16");
include 'includes/tile.php';



<span class="stretch"></span>


Here is my Tile.php :

<div id="tile_image_wrapper">

<a href="storepage.php?name=<?php echo $row['storename']; ?>" />



'<div id="tile_inner_wrapper">' .

'<img src="images/stores/' . $row['storename'] . '.png">' .





Here is my CSS :

#tile_wrapper {
margin-left: auto;
margin-right: auto;

text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;

#tile_image_wrapper {

display: inline-block;
border:1px solid #ccc;

border-radius: 3px;


#tile_inner_wrapper {

vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;

#tile_wrapper img {
top: 50%;
transform: translateY(-50%);
display: block;
position: relative;
margin: 0 auto;


#tile_image_wrapper:hover {
border:1px solid #aaa;

.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0

Thankyou for any help

Answer Source

You have a error when creating the DOM from your PHP files since you close the a tag around your image tiles immediately and try to close it once more after defining the tile. Try to change

<a href="storepage.php?name=<?php echo $row['storename']; ?>" />


<a href="storepage.php?name=<?php echo $row['storename']; ?>">

I've made a jsfiddle show this in action:

You have also a couple typos in your css (*display:inline and a missing semicolon in .stretch).

Also note that the CSS3 property text-justify is currently only supported in Internet Explorer 5.5+ (

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download