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 use css3 transition on hover for td?

    How to create this quote box with (preferably) HTML5/CSS3?

    How to overlay a div upon other div while scrolling using css

    how to set two div's height equal with css

    I'm making a chatbox. I have a div and input field inside of a div. I want them to resize in a particular way. How do I do this, preferably with css?

    CSS: How can I get rid of the default window “padding”? An element set to 100% width doesn't reach the window's borders

    CSS: How to make an image-border

    How to highlight the table row using jquery in Rails 3?

    How to create a cross with pure css [duplicate]

    How: have more than one CSS sprite on a page

    Nginx server (not showing changes) - Delete cache?

    Infuriating gap: How do you get rid of a gap between IMG and surrounding content

    How to target certain text to make bold using css

    how to get main div container to align to centre

    how to change a css class onclick?

    How to prevent mobile keyboard from rising footer over the text fields?

    how to change the opacity of the text along with the colorscale of the image in css?

    How to set up a correct cascade with label statement

    How to fill remaining height and width?

    How to create page breaks automatically in CSS?

    How to add transition to CSS3 Animation steps

    Slideshow image with buttons

    How to set a background-color to element which has the same id with anchor of url?

    How make a fixed element be on top of another position fixed element

    How to align text and image in a CSS box?

    How to style CSS for input box's width as a percentage when it has border and padding?

    How to place a color cover on top of an image in CSS

    How to select only for the first of divs with equal names?

    jQuery/CSS - How to style the first occurrence of an element inside of another element?

    How to make text box scroll vertical in overflow css html?