Home/ Questions/Q 6885323
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T05:37:13+00:00

I have two divs with borders as the picture below shows. How do I

  • 0

I have two divs with borders as the picture below shows.

enter image description here

How do I remove only the border where the 2 divs touch like the picture below shows?

enter image description here

Here is the html and css used in the top picture (js fiddle: http://jsfiddle.net/paulyoder/whsC4/19/)

<html>
    <head>
        <style type="text/css">
            #sideBar {
                float: left;
                width: 75px;
                height: 50px;
                border-top: 1px solid black;
                border-left: 1px solid black;
                border-bottom: 1px solid black
            }

            #balanceSheetSummary {
                float: left;
                width: 150px;
                height: 150px;
                border: 1px solid black;
            }

            body { padding: 10px; }
            h2 { margin: 5px; }
        </style>
    </head>
    <body>
        <div id="sideBar">
            <h2>Side Bar</h2>
        </div>
        <div id="balanceSheetSummary">
            <h2>Content</h2>    
        </div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0