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 give space between each tab in the navigation using Jquery and CSS

    css animation how to get the ball to bounce

    How to get On/Off FlipSwitch to trigger function

    CSS: how to position element in lower right?

    How to make a menu centered using CSS

    How do I center HTML objects on an MVC 4.0 Web API using Razor application?

    How to keep a very tight control over the order of CSS files in Yii Framework

    How to change width to fill the remaining space (CSS)

    How to make this loading animation?

    How can I get a relative div to expand to fit its absolute contents?

    How can you remove the table-tags in CreateUserWizard control

    How to calculate CSS letter-spacing v.s. “tracking” in typography?

    How to find elements and siblings within a tree

    How to navigate to the top of a div?

    How to put the faded hover effect on the button?

    How to inserted HTML tag from pseudo-element content: [duplicate]

    How to stop css animation in current position on hover?

    D3js SVG open lines display a fill artifact, how to fix it?

    style sheet -moz-linear-gradient no show in web mobile browser?

    How to gain hanging indent list with CSS Counters?

    How do I fix hover property of a div?

    CSS how to postiton div outside main container without it moving over the container on window re-size? [closed]

    How to select a certain element in CSS by numerical position

    How to get CSS Variables working in Dart

    How To Make This Form Work

    how to make edges of a line fade out?

    How to get `:after` to work in extjs iconCls?

    What is the best way to store css data inside database and call it similar to how a css file would be

    How can I show this 2 div side by side?

    How do I make images interactive?