Question

I have a simple code that I want to list images like in a gallery. I want to display my images like these ones

However the div is output in an ascending order on the y axis. how can I fix this? My php and html code is here

<div id="gallerycontent">
        <?php for($x=0;$x<10; $x++){ ?>
        <div class="galleryitem">
        <img src="images/SamplePackSpread.png"/>
        </div>
        <?php }?>
    </div>

My css code is here

#gallerycontent{
    float: left;
    max-width: 685px;
    padding: 10px 5px 5px 5px;
    text-align: justify;
}

#gallerycontent .galleryitem{
    width: 250px;
    height: 250px;
    background:url('../images/screen.png');
    background-repeat: no-repeat;
    padding: 5px 5px 5px 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    clear: both;
}
#gallerycontent img{
    float: left;
    width: 90%;
    height: 90%;
    margin: 2.5%;
}
#gallerycontent ul{
    padding-left: 50px;
    list-style-type:square;
}

Answer 1

Add display:inline-block to .galleryitem

#gallerycontent .galleryitem{
    width: 250px;
    height: 250px;
    background:url('../images/screen.png');
    background-repeat: no-repeat;
    padding: 5px 5px 5px 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    clear: both; display:inline-block
}

DEMO