Partial Border In Css

I have two divs with borders as the picture below shows. How do I remove only the border where the 2 divs touch like the picture below shows? Here is the html and css used in th

Solution 1:

You could do something like this: http://jsfiddle.net/sj2AD/1/

#sideBar {
   float: left;
   width: 75px;
   height: 50px;
   border-top: 1px solid black;
   border-left: 1px solid black;
   border-bottom: 1px solid black;
   background: red;
   position: relative;
   z-index: 2;
}

#balanceSheetSummary {
   float: left;
   width: 150px;
   height: 150px;
   border: 1px solid black;
   background: red;
   position: relative;
   z-index: 1;
   margin-left: -1px;
}

body { 
   padding: 10px; 
}
h2 { 
  margin: 5px; 
}

What I did was to add a negative margin to the right one so that the boxes overlap.

This does break, for example if the left div is higher than the right one.

Solution 2:

check this

http://jsfiddle.net/whsC4/17/