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; ?>

Answer 1

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>

Answer 2

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/