CSS/PHP: How to make the next div appear on the side instead


Tags: php,html,css

Problem :

I'm stuck on the project that I am doing right now. I made a php that outputs a single div, this div will output multiple times depending on the number of items that I have in my database, my problem is that, I want the next div to be outputted on the left side of the previous div, just like this:

 -----   -----   -----
|div 1| |div 2| |div 3|
 -----   -----   -----
 -----   -----   -----
|div 4| |div 5| |div 6|
 -----   -----   -----

But I can't think of any ways to do it, it's outputting as it should be like this:

 -----
|div 1|
 -----
 -----
|div 2|
 -----
 -----
|div 3|
 -----
and so on...

Hope you guys can help me, thanks.

PHP:

$results = $mysqli->query("SELECT * FROM content");
    if ($results) { 

    //fetch results set as object and output HTML
    while($obj = $results->fetch_object())
        {
        echo '<div class="content">'; 
        echo '</div>';
        }
    }

CSS:

.content{
    margin-bottom: 10px;
    height: 300px;
    background: #F0F0F0;
    padding: 10px;
    border: 1px solid #DDD;
    border-radius: 5px;
    box-shadow: 2px 2px 2px #F8F8F8;

}


Solution :

need a wrap div for class="content"

$results = $mysqli->query("SELECT * FROM content");
    if ($results) { 

    //fetch results set as object and output HTML
    while($obj = $results->fetch_object())
        {
        echo '<div class="box"><div class="content">'; 
        echo '</div></div>';
        }
    }

and the css

.box{
     width: 33.333333333%;
     box-sizing: border-box;
     float: left;
     }

here is demo http://jsfiddle.net/taunj8m0/2/


    CSS Howto..

    How do I make the class 'path' show up at higher zoom levels using carto CSS in MapBox Studio?

    How to create dynamic business listings in wordpress [closed]

    how to properly align list items vertically?

    How to invert the pentagon created using CSS?

    How to start ordered list from 2 not 1 with w3c validity and IE 6 compatibility?

    css - how to stretch a background image across the entire window

    How to do multiple class selectors in Stylus CSS pre-processor

    How to center vertically child elements inside div [duplicate]

    CSS Flexbox: How do you align child elements of a flexbox container to opposite far ends of the main axis?

    How to make horizontal lines with words in the middle using CSS?

    Using CSS to show gradient as well as an image

    How to do something like #Card%{ } in CSS

    How do you target div last-child within another div?

    How to put my form on top of an image in css/html?

    How to make font sharp in CSS?

    using jquery show/hide doesn't keep css in div

    How to enlarge and tint photo with pure CSS and jQuery [closed]

    How to change lines in an angularJS+Bootstrap?

    How to hover span content from li

    How to remove the blue border around ImageMap control in the Internet Explorer?

    How to make a text or html tag look like a button

    How to display text left side and icon on right side in html css?

    How can I show a loading screen while a really large image is loading?

    How can I correctly type css float?

    How to vertically align image in a td cell, without vertically-align

    How to check if style ID contains certain css selectors?

    How to style the NSString using CSS?

    How to make an inline-element to occupy space above and below itself within a text using CSS?

    How to use one icon from different image files?

    How can I remove a text appearing in quotes after tag using CSS? [duplicate]