Display mySQL results as horizontal tiles

Question

I am trying to display my mysql results as horizontal tiles that will "wordwrap" once it reaches the end of the screen. Right now it is showing all the results in a vertical column.

How do I display my results as tiled/grid?

<?php while ($r = $q->fetch()): ?>
                <div class="tab-content clear">
                    <div role="tabpanel" class="tab-pane active" id="home">
                        <div class="col-sm-4 col-xs-4 section1a">
                            <div class="sectionstyle">
                                <div class="textcenter">
                                    <h2> <?php echo $r['Name'] ?></h2>
                                    <p>description goes here</p>
                                </div>
                                <div class="">
                                    <img class="img-responsive" src="images/image.jpg">
                                </div>
                                <div class="clear"></div>
                                <p><small>bar A</small>
                                </p>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                        <span class="sr-only">40% Complete (success)</span>
                                    </div>
                                </div>
                                <p><small>bar B</small>
                                </p>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                                        <span class="sr-only">20% Complete</span>
                                    </div>
                                </div>
                                <p><small>bar C</small>
                                </p>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                        <span class="sr-only">60% Complete (warning)</span>
                                    </div>
                                </div>
                                <p><a class="btn btn-success btn-primary btn-block buttoncenter" href="#" role="button">Submit</a>
                                </p>
                            </div>

                        </div>
                    </div></div>
                <?php endwhile; ?>

I thought I would have to change my php to display the results differently. Sorry if I am wrong I am very new to the PHP world. Added more relevant tags. — gdkawb, Mar 04 '15 at 01:12
See CSS and then 'float': http://www.w3schools.com/cssref/pr_class_float.asp, but you could also use display:inline-block. — KIKO Software, Mar 04 '15 at 01:19
Check out this question about aligning divs horizontally with css: http://stackoverflow.com/questions/37103/css-make-divs-align-horizontally — bloodyKnuckles, Mar 04 '15 at 01:27

score 1 · Answer 1 · answered Mar 04 '15 at 01:22

1

If you can use flexbox (newer browsers) it's easy.

On the parent container add a style="display:flex; flex-direction:row;" http://jsfiddle.net/156onrub/

answered Mar 04 '15 at 01:22

Matt

5,315
1
30
57

score 0 · Accepted Answer · answered Mar 04 '15 at 01:26

Figured it out. I had the while loop in the wrong spot. This is how I fixed it. Totally a CSS issue and nothing to do with PHP.

            <div class="tab-content clear">
                <div role="tabpanel" class="tab-pane active" id="home">
                  <?php while ($r = $q->fetch()): ?>
                    <div class="col-sm-4 col-xs-4 section1a">
                        <div class="sectionstyle">
                            <div class="textcenter">
                                <h2> <?php echo $r['Name'] ?></h2>
                                <p>description goes here</p>
                            </div>
                            <div class="">
                                <img class="img-responsive" src="images/image.jpg">
                            </div>
                            <div class="clear"></div>
                            <p><small>bar A</small>
                            </p>
                            <div class="progress">
                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                    <span class="sr-only">40% Complete (success)</span>
                                </div>
                            </div>
                            <p><small>bar B</small>
                            </p>
                            <div class="progress">
                                <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                                    <span class="sr-only">20% Complete</span>
                                </div>
                            </div>
                            <p><small>bar C</small>
                            </p>
                            <div class="progress">
                                <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                    <span class="sr-only">60% Complete (warning)</span>
                                </div>
                            </div>
                            <p><a class="btn btn-success btn-primary btn-block buttoncenter" href="#" role="button">Submit</a>
                            </p>
                        </div>

                    </div>
                  <?php endwhile; ?>
                </div>
              </div>

Display mySQL results as horizontal tiles

2 Answers2