Hi All,
I have an example of a dynamic number of divs all floating left:
...but would like the new row to be tucked up under the previous as in my example desired output:
I know using columns might be the best way to go but am having trouble with exactly how to go about that. A CSS solution would be great.
I do know how many boxes there will be when i start out. Any thoughts?
Thanks.
This jQuery plugin might be of help: http://desandro.com/resources/jquery-masonry/
Edit: I don't think a pure CSS solution is sufficient. You may know the number of columns, but you won't know the size of columns without javascript trickery. I recommend the above plugin.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() {
counter = $("#container > div").size(); // count total immidiate children of container columns = 3;
leftpos = 0; var myarray = []; var temp = []; temp[0] =temp[1] = temp[2] =0; j=0;
for(i=1;i<=counter;i++) {
width = $("#div"+i).width();
$("#div"+i).css('left',leftpos+'px'); $("#div"+i).css('top',temp[j]+'px');
$("#div"+i).css('display','block');
leftpos = leftpos + width; myarray[j] = $("#div"+i).height();
temp[j] = temp[j] + myarray[j]
j++; if(i%columns==0) {leftpos =0; var myarray = []; j=0;}
}// end of for loop
});
</script>
<style type="text/css">
.divs { width:300px; float:left; display:none; position:absolute; border:#000 1px solid;} </style>
<div id="container"> <div id="div1"> asd falksjdf alksjdf ;asdf asdf asdfa sdlfkjal; sdfkl;aksjd f;lkasjdf ;laksjdf ;laksjdf ;laksjdf laksdjfa lskdfj a;sldkfj as </div> <div id="div2">t is a long established fact tha sdf at a reader will be distracted by the readable content of a page when looking at its layout. </div> <div id="div3">t is a long established fact that a ra sdfkahsd fadsfeader will be distracted by the readable content of a page when looking at its layout. t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </div> <div id="div4">t is a long established fact that a reader will be di asdkjfh laksjdhf aksdhf stracted by the readable content of a page when looking at its layout. t is a long established fact that a reader will be distracted by the readable content of a</div> <div id="div5">t is a long established fact that a reader will be distracted by the readable asd asdf asdfk hasdfcontent of a page when looking at its layout. </div> <div id="div6">t is a long established fact that a reader will be distracted by the readable content of a page whas dfasdf asdfkjh f en looking at its layout. </div> <div id="div7">t is a long established fact that a reader will be distracted by the readable content of a page when looking at its la asdf ads fadfyout. </div> <div id="div8">t is a long established fact that a reader will be distracted by the readable content of a page when looking at its la dfa fayout. </div> <div id="div9">t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layoua adsf t. </div> <div id="div10">t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layoa dfasd fasdf asd fasdf ad asdfadsf asdf ut. </div> <div id="div11">t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layou asd fasdf aksd fkjahsd fjkahsd flkjahsd ft. </div>
</div>