Adhesive divas next to each other

Question

Is there any way to make divs a kind of glue to each other regardless of the size that they have?

http://imgur.com/mxODPnk

I tried searching, and float:left works, but, for example, in the image above the yellow div, brown and green colors do not appear in the same place as in the image, but below the yellow line.

I tried using display: inline-block , but it still doesn't work.

 .glue-div{ margin-left: 10px; border: 1px solid black; color: orange; float: left; background: #303030; } 

here is jfiddle which is my question: http://jsfiddle.net/sezcY/

Just look at the position of div 6. It should be below three, and it has a huge margin.

I think I would have to reorder divs through jQuery?

Answer 1

They are built-in, increase the size of the results pane and check it.

However, when the screen or body element decreases, several DIV elements can move down.

Fix this problem

 /* Mobile browsers only */ @media only screen and (max-device-width: 480px) { .newsletter_input { width: 320px; } .newsletter_input #form{ font-size:42pt } } 

change selector

Answer 2

If you want two DIVs to stick together , put them in two cells (in one row or in two rows, as you like) of the same table - they will keep their position with each other and will not drift from each other if you narrow the window .