Getting a fixed div height to continue on the next line

Question

Not sure if this is possible, but for an independent situation, here is what I need:

• 100px high div with upper and lower bounds.

• an unknown number of elements in a div that are displayed horizontally at the top and bottom borders of the parent div.

• It is important to note that if an element contains more elements that can fit horizontally, the div should continue the new line of elements below. This second line should also have elements displayed horizontally between the upper and lower borders of the parent div. I don’t want the div to just increase in height and start a new line, because this will not allow the upper and lower borders to appear above and below each line of elements.

Answer 1

You can set the width of the wrapper and place those blocks that are 100 pixels tall in it.

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

the 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 the wrapper, you can set the number of div blocks that you want in each row.

Edit: Added JS if the last item needs to be expanded for the whole line.

Answer 2

Using the power of background images.

http://jsfiddle.net/lollero/UTtVJ/1/

Edit: I noticed that the #bottom-line element did not display in ie7. It seemed to work + ie8. Probably easy to fix. Since this solution is not so popular, I will not do anything with it.

CSS

 #wrap { background: url('http://img209.imageshack.us/img209/5188/linedu.png') repeat top left; float:left; margin-top: 20px; position: relative; } #inner-wrap { float: left; margin-bottom: -40px; } #wrap #top-line, #wrap #bottom-line { position: absolute; margin: 0px; height: 2px; background: url('http://img209.imageshack.us/img209/5188/linedu.png') repeat-x 0px -116px; left: 0px; right: 0px; } #wrap #top-line { top: -8px; } #wrap #bottom-line { bottom: -28px; } #inner-wrap > div { margin-bottom: 20px; margin-left:10px; float: left; width: 100px; height: 100px; background: #111; border: 1px solid red; text-align: center; color: #888; }​ 

HTML:

 <div id="wrap"> <div id="top-line"></div> <div id="bottom-line"></div> <div id="inner-wrap"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> </div> </div>​