Remove gap between Div box using CSS

Question

I'm getting all data from mysql database and showing in CSS Div box {class = box} using php while loop. Now all data is showing perfectly but I see that there a big gap between the boxes. How can i remove the gap/space ? It's look like the following image:

enter image description here

I'm using following CSS Code:

.box{
    float:left;
    position: relative;
    width:320px;    
    border:1px #ccc solid;
    padding:5px;
    margin:0 5px 5px 0;
}

It's should be show like http://www.pinterest.com/ home page.

Here is the php code:

<?php
$query =  mysql_query("SELECT DISTINCT * FROM keyword_type ORDER BY keyword_full_name ASC");
$numType =  mysql_num_rows($query);

while($result = mysql_fetch_array($query)){ 

    $typeID =  $result['keyword_typeID'];
    $keywordType =  strtoupper($result['keyword_full_name']);

    echo "<div class='box'>";

    echo "<h3><strong>$keywordType</strong></h3>";
    $query2 =  mysql_query("SELECT * FROM keywords WHERE keyword_typeID = '$typeID' ORDER BY keywordName ASC ");
    $num2 =  mysql_num_rows($query2);

    while($result2 =  mysql_fetch_array($query2)){

        $kid = $result2['kid'];
        $keywordName = ucfirst($result2['keywordName']);

        $query4 =  mysql_query("SELECT kid FROM userkeywords WHERE cdid = '$cdid' AND kid='$kid'");
        $num = mysql_num_rows($query4);

        if($num > 0){
            $class = "keywordHighlight";    
        }else{
            $class = "";
        }

        echo "<div onclick='keywordclick($kid,$cdid);' class='$class'>$keywordName</div>";          


    }
    echo "</div>";

}

?>

Any help ?

PHP is irrelevant here. It's about styling the output; the fact it came from PHP/MySQL is of no consequence to your question. — Mitya, Sep 07 '14 at 10:53
@Shibbir: I would sincerely recommend to remove the PHP/MySQL stuff and instead post the resulting HTML. — lxg, Sep 07 '14 at 10:55
I think @lxg was talking about the code. Since this is a markup issue, only the outputted HTML is relevant. It will be impossible for us to run this code. — GolezTrol, Sep 07 '14 at 11:06

score 5 · Accepted Answer · edited May 23 '17 at 11:49

5

I solved a similar issue by dividing the page into columns. The divs are then basically underneath each other. This is a simple, CSS only solution, but it's not perfect. There is a gap at the bottom of the page, and above that, the order changes of course from a horizontal to a vertical ordering.

Nevertheless, it might be useful for you. This is the page it is used on:

http://www.eftepedia.nl/lemma/Categorie%C3%ABn

You can do this with CSS columns, like this:

.container {
    -webkit-columns: auto 3; /* Chrome, Safari, Opera */
    -moz-columns: auto 3; /* Firefox */
    columns: auto 3;
}

For the boxes you can use break-inside: avoid-column; to avoid them breaking over multiple columns. Also see this question for more information about specific issues with that.

Bringing it together in a minimal example fiddle: http://jsfiddle.net/02f4wqcm/

edited May 23 '17 at 11:49

Community

1
1

answered Sep 07 '14 at 10:56

GolezTrol

114,394
18
182
210

Wow! Exactly that I want! – Shibbir Sep 07 '14 at 11:00
But how they do this ? – Shibbir Sep 07 '14 at 11:01
I added explanation and a fiddle, that also clearly shows the vertical ordering. I hope that's not an issue for you. – GolezTrol Sep 07 '14 at 11:04
2

See also a polyfill for older browsers https://github.com/adamwulf/Columnizer-jQuery-Plugin – Anton Boritskiy Sep 07 '14 at 11:10

score 0 · Answer 2 · answered Sep 07 '14 at 10:53

0

You need to use jQuery for removing the spaces.

Try following libraries

http://isotope.metafizzy.co/layout-modes.html

http://packery.metafizzy.co/options.html

answered Sep 07 '14 at 10:53

Varun Victor

100
5

Remove gap between Div box using CSS

2 Answers2

Linked