getting fixed height div to continue on next line

Question

Not at all sure that this is possible but on the off-chance, here is what I need:

• 100px high div with top and bottom border.

• an unknown number of items within the div that are displayed horizontally within the top and bottom borders of the parent div.

• Importantly, if more items are contained within the div that can fit horizontally, the div should continue with a new row of items below. This second row should also have the items displayed horizontally between the top and bottom borders of the parent div. I do not want the div to simply grow in height and start a new line because this will not allow the top and bottom borders to appear above and below each row of items.

Answer 1

You can set the width of wrapper and put those blocks which are 100px high inside it.

Here is the example: http://jsfiddle.net/BVm5h/

Code:

<div class="wrapper">
 <div class="myClass">1</div>
 <div class="myClass">2</div>
 <div class="myClass">3</div>
 <div class="myClass">4</div>
 <div class="myClass">5</div>
 <div class="myClass">6</div>
 <div class="myClass">7</div>
 <div class="myClass">8</div>
 <div class="myClass">9</div>
 <div class="myClass">10</div>
</div>

CSS:

.wrapper {width: 600px;}

.myClass {
 border-top: 1px solid #FF0000;
 border-bottom: 1px solid #FF0000;
 width: 100px;
 height: 100px;
 float:left;
 margin-top: 5px;
}

div.myClass:last-child {
 width: 100%;
}​

JS:

var no = $('div.myClass').length;
var wlength = $('div.wrapper').width();
var length = $('div.myClass').width();
var tno = no*length;
while(wlength < tno)
 tno=tno-wlength;
var mw = wlength+length-tno;
$('div.myClass').last().css('max-width',mw);

​ ​ By changing the width of wrapper, you can set the number of div blocks you wish in each row.

Edit: Added JS if the last element is to be extended for entire row. ​