Double borders div should merge css

Question

If you look at this fiddle you'll see that the borders won't merge.
css:

div{     float:left;     background-color:moccasin;     width:100px;     height:100px;     border:1px solid tomato; } 

The amount of divs is random, and I can only give it 1 class/id.
Also keep in mind that the page can be resized and the amount of divs on a row can change.

I've tried margin-left:1px; and last-child/nth-child() selectors but they don't work when you resize the screen or it still gives unwanted border.

edit: I can NOT move the divs for a single pixel, when I give the divs margin-left:-1px; and give the first div margin-left:1px; I'll get unwanted results in the next rows.

Answer 1

Just add to the div

margin-top: -1px; margin-left: -1px; 

check the following example:

div{      float:left;      background-color:moccasin;      width:100px;      height:100px;      border:1px solid tomato;      margin-left: -1px;      margin-top: -1px;  }

<div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>

ANOTHER SOLUTION WITH JS Here is the DEMO

CSS:

div{ float:left; background-color:moccasin; width:100px; height:100px;     border-bottom:1px solid tomato; border-right:1px solid tomato; } div:first-child{ border-left:1px solid tomato; } div.first-row { border-top: 1px solid tomato; } 

jQuery:

var borderCollapse = function() { var div = $('div'); var divWidth = 0; var rows = 1; div.each(function() { var that = $(this); var div = $('div'); var width = div.parent().width(); var thisWidth = $(this).width();  if (divWidth < width) {         that.prev().not('div:first-child').css({'border-left':'0'});     divWidth += parseInt(thisWidth);         } else {      that.prev().css({'border-left':'1px solid tomato'});     divWidth = 2 * thisWidth;     rows += 1;         }  if (rows <= 1) {     that.prev().addClass('first-row'); } else {     that.prev().removeClass('first-row'); }  }); }  borderCollapse();  $(window).resize(function() {   borderCollapse(); });