Make grid of divs move depending on surrounding elements - html

Question

I am trying get a grid of div elements into a dynamic grid system. When the width and height of all elements are static (and most importantly all the same) it works by setting float:left on the element to get the desired effect.
HTML:
<div id="main">
<div class="someDiv">1 - Text</div>
<div class="someDiv">2 - Text</div>
<div class="someDiv">3 - Text</div>
<div class="someDiv">4 - A lot longer text.</div>
<div class="someDiv">5 - Text</div>
<div class="someDiv">6 - Text</div>
<div class="someDiv">7 - Text</div>
<div class="someDiv">8 - Text</div>
<div class="someDiv">9 - Text</div>
<div class="someDiv">10 - Text</div>
</div>
CSS:
div.someDiv {
float:left;
margin: 10px;
padding:5px;
width:150px;
display:inline-block;
}
If I however have one element that has a larger body of text inside it (thus having a larger height than the others) all elements which are on the row below and to the left of this seem to be "pushed" down. Behaviour can be observed here; jsFiddle.
What I wish to do is to get all div elements (in the example this would be elements 5,6 and 7) to be just under the elements above them (elements 1,2 and 3 in the fiddle).
How can I achieve this, whilst still keeping a dynamic height of each div?

Answer 1

Assuming the columns have a fixed width and you are ok with a fixed number of columns then rework the html to have fixed width columns (divs) that float left. Put equal width divs in them and the height won't matter.
If you want a dynamic number of columns with this method you would need to use javascript to move inner divs and decide the number of cols to have based on width then assign the dis to columns.
I believe angularjs ui-grid can handle them much more complicated situations often.
EDIT:
Here is a fiddle to demonstrate.
http://jsfiddle.net/6mDLC/
Maybe I misunderstood what you want, let me know if the fiddle doesn't do what you do want
HTML:
<div class="main">
<div class="col">
<div class="content">
Some text
</div>
<div class="content">
Some text
</div>
<div class="content">
Some text ASFKLAJJK ALKSJFLF LAJ SFLKJAS LFKJA LSFJ ALSKFJASL FK ALSKFJ ALKFJ AL
</div>
<div class="content">
Some text
</div>
</div>
<div class="col">
<div class="content">
Some text ASFKLAFJK ALKSJSKF LAJ SFLKJAS LFKJA LSFJ ALSKFJASL FK ALSKFJ ALKFJ AL
</div>
<div class="content">
Some text
</div>
<div class="content">
Some text
</div>
<div class="content">
Some text
</div>
</div>
<div class="col">
<div class="content">
more text
</div>
<div class="content">
Some text ASFKLAFJK ALKSJSKF LAJ SFLKJAS LFKJA LSFJ ALSKFJASL FK ALSKFJ ALKFJ AL
</div>
<div class="content">
Some text
</div>
<div class="content">
Some text
</div>
</div>
CSS:
.content{
width:150px;
border:1px solid red;
margin-bottom:10px;
}
.col{
margin:5px;
float:left;
}
JS:
$(".content").click(function () {
if ($(this).html().length > 40) {
$(this).html("This is just some random text");
} else {
$(this).html("This is just some random text, but is taking up more space than it was before. This will cause others to do weird stuff.");
}
});

Answer 2

Try using this
div.someDiv {
float:left;
margin: 10px;
padding:5px;
background:aqua;
width:150px;
display:inline-block;
overflow:auto;
height:50px;
}