Floating of Divs not exact. How to arrange them the right way?


Tags: jquery,html,css

Problem :

As you can see in the screenshot: enter image description here

the order is not that perfect. I like to arrange the articles without any gaps. Means like this:

enter image description here

Any ideas how i can manage that via CSS/CSS3 or javascript? Thanks a lot!



Solution :

You can use CSS, but the problem is, the property only supports >IE10. Which then you could fallback to jQuery Masonry

http://jsfiddle.net/4gXCs/

.col {
   -moz-column-count:2; 
   -webkit-column-count:2; 
   column-count:10px;
   -moz-column-gap:10px;
   -webkit-column-gap:10px; 
   column-gap:2;
}

    CSS Howto..

    How to set a:link height/width with css?

    JavaScript or CSS: How can I make a transition of one element to another?

    how to use javascript to get visited link css styles

    drupal themes: how do I include several css files / js files on my theme's .info file?

    How to put a space between the hover effect in this situation css html php?

    How to change the background image of input button with jquery

    How to make content of invisible except for the left column?

    How can I create inline CSS in a WordPress PHP file without referencing to an external CSS file?

    How to create gradient background with CSS in Firefox < 3.6?

    How to change the CSS for all elements with a common identifier using Javascript?

    How to add bootstrap css to my Wordpress plugin

    How to remove the blank between div.sons?

    CSS/Web design: how to create an oblique/sided button

    How to have two items be placed next to each other in HTML?

    How to make a CSS transform affect the flow of other elements

    How to add image and change visibility on hover CSS

    How to “mark” a UL/LI nav item as “active” based on click?

    how to disable width: 100%; and box-sizing: border-box;

    how can I create overlay div to fit the rest of the screen

    How can I figure out how much a div shifts when a translate:scale is applied?

    Auto-scaled image not shown correctly with IE 10

    How to override css-setting for the elements of nested table?

    How to reference / link to a Css-File styling elements in a webview for Android

    How to blur one side of the div using CSS

    Show/hide rows based on class in HTML

    How to make a CSS rule act differently inside another div tag?

    How to change the mouse cursor over an embedded flash?

    How to add a background image or theme through CSS?

    how to restore to original CSS

    How to prevent inherit for H1?