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 to add lines to
  • elemtents
  • How to get css and django working on live server

    How to reproduce the following effect in CSS, stuck at padding(I think) Bootstrap 3.0

    How to make text wrap above and below a div?

    CSS Sprites - How to leave Hover button in depressed state

    How to get background img to show up in :after selector?

    How to implement geometric div backgroud shapes in css

    How to dynamically add more width inside a div?

    How to get row of floated images inside a div element to resize with browser window

    how to creating a separator line which is always in the middle (center)

    How to inline style an embedded gist with CSS

    Using Javascript or JQuery to show/hide on click, and change image as well

    How to fit img into div circle ?

    How do CSS grid systems save time when implementing designs that aren’t grid-based?

    How to hide sliding div with css

    How can I correctly type css float?

    css how to stretch center div to fill allowable area

    How to right align a div containing a form in another div?

    How to change font-size of a tag using inline css?

    How to make text flow from left right bootstrap

    How to handle caching of GWT theme CSS files

    How to fix CSS background position

    How to display a div at the center of viewport?

    Why not show class css in email when using mail() php send mail to gmail?

    How to make all the content placed in the center of div?

    How to overlay divs with pure css?

    Have element show when .onclick and when the element has focus from tab

    How can i make a fixed box inside a div with scroll?

    How to write this css in shorter way? see example

    How to make the background image to fit into the whole page without repeating using plain css?