CODEWITHSUNDEEP
css
Kungfauxn00b
Kungfauxn00b

Reputation: 597

Remove vertical space between floating DIVs

Can someone point me in the right direction for removing the vertical space between my different sized DIVs? They (obviously) work fine when they're all the same height but they're all going to vary in height and I want them to look cool.

DIV gaps

I'd like them all to nest up under each other (like the 3rd column).

HTML:

    <div id="" class="productDivs">
        <img src="http://placehold.it/290x162">
        <h2>This is the DIV title</h2>
        <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p>
    </div>
    <div id="" class="productDivs">
        <img src="http://placehold.it/290x162">
        <h2>This is the DIV title</h2>
        <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi. Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi. Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p>
    </div>
    <div id="" class="productDivs">
        <img src="http://placehold.it/290x162">
        <h2>This is the DIV title</h2>
        <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p>
    </div>
    <div id="" class="productDivs">
        <img src="http://placehold.it/290x162">
        <h2>This is the DIV title</h2>
        <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p>
    </div>
    <div id="" class="productDivs">
        <img src="http://placehold.it/290x162">
        <h2>This is the DIV title</h2>
        <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p>
    </div>
    <div id="" class="productDivs">
        <img src="http://placehold.it/290x162">
        <h2>This is the DIV title</h2>
        <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p>
    </div>
    <div id="" class="productDivs">
        <img src="http://placehold.it/290x162">
        <h2>This is the DIV title</h2>
        <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p>
    </div>
    <div id="" class="productDivs">
        <img src="http://placehold.it/290x162">
        <h2>This is the DIV title</h2>
        <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p>
    </div>

CSS:

.productDivs {
    max-width: 290px;
    min-height: 50px;
    margin-bottom: 25px;
    margin-right: 18px;
    padding: 5px;
    border: 1px solid #e0e1dd;
    float: left;
    display: block;
}

Here's a fiddle of what I have so far.

Please be gentle, I'm still learning CSS :)

Upvotes: 2

Views: 409

Answers (3)

JoeCodeCreations
JoeCodeCreations

Reputation: 668

This is the solution to the problem ( CSS, no vertical spacing, masonry layout) https://stackoverflow.com/a/25668648/871781

Upvotes: 0

Potatoes
Potatoes

Reputation: 310

I would recommend to use Masonry and imagesLoaded library combined

http://masonry.desandro.com/

http://imagesloaded.desandro.com/

Calling first the imagesLoaded library and then the masonry, the display should be good. 

**HTML**
<div class="productDivsWrapper">
    <div id="" class="productDivs">
        <img src="http://placehold.it/290x162">
        <h2>This is the DIV title</h2>
        <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p>
    </div>
    ...
</div>

**JS**
$('.productDivsWrapper').imagesLoaded( function() {
    $(".productDivsWrapper").masonry(
        {
            itemSelector:'.productDivs',
        }
    );
});

Here a jsfiddle : https://jsfiddle.net/1hc31mth/1/

Upvotes: 1

Clomp
Clomp

Reputation: 3308

This isn't going to be an easy answer. The float:left will cause it to wrap below the bottom edge of the tallest box that's on the right side of the row above it. So you end up with these vertical gutters. When I worked over at http://www.eonline.com, we had this same issue on the home page.

My friend Lou created what is called the Liquid Pinning engine for that site. I was able to help him fix it, when he got stuck. You may want to dig through this script for some answers on how to move the divs up: http://www.eonline.com/resources/js/liquid_pinning/liquid_pinning.js

I believe that they are absolutely positioned, using fixed pixel heights. There are arrays, which track each column's total height & adjust the columns as necessary. The script finds where to put the div & places it into that vertical space area, so that the vertical gaps aren't created.

It was a pretty cool piece of work, which we modeled off of the http://www.pinterest.com website. It looks like your divs are trying to accomplish that same effect.

Note: That script was created to enable the 3-column wide to 4-column wide to 5-column wide look & feel that occurs, when a user adjusts their resolution on that home page. It will also pin fixed widgets into the upper right & upper left corners, as needed. Try zooming in & out to see that effect.

Upvotes: 0

Related Questions