Preventing “double” borders in CSS

Question

Say I have two divs next to each other (take https://chrome.google.com/webstore/category/home as reference) with a border.

Is there a way (preferably a CSS trick) to

Answer 1

I know this is a late reaction, but I just wanted to drop my 2 cents worth, since my way of doing it is not in here.

You see, I really don't like playing with margins, especially negative margins. Every browser seems to handle these just that tad bit different and margins are easily influenced by a lot of situations.

My way of making sure I have a nice table with divs, is creating a good html structure first, then apply the css.

Example of how I do it:

 

   

     
header1
     
header2
     
header3
     
header4
   
   

     
stuff
     
stuff
     
stuff
     
stuff
   

Now, for the css, I simply use the rows structure to make sure the borders are only where they need to be, causing no margins;

.tableWrap {
  display: table;
  }

.tableRow {
  display: table-row;
  }

.tableWrap .tableRow:first-child .tableCell {
  border-top: 1px solid #777777;
  }

.tableCell {
  display: table-cell;
  border: 1px solid #777777;
  border-left: 0;
  border-top: 0;
  padding: 5px;
  }

.tableRow .tableCell:first-child {
  border-left: 1px solid #777777;
  }

Et voila, a perfect table. Now, obviously this would cause your DIVs to have 1px differences in widths (specifically the first one), but for me, that has never created any issue of any kind. If it does in your situation, I guess you'd be more dependant on margins then.