Question

I have two divs with same border style, have different heights and are back to back to each other. I want the common border between them not to display. How can this be done in html and css?

Answer 1

A lot of people have suggested getting the smaller div to overlap the larger one and setting the left border to the same color as the background color. The problem with this is that you will get a 1px gap at the two spots where the div borders overlap:

http://jsfiddle.net/RWz4A/

In order to avoid this, you can explicitly remove the left border, and have a non-transparent background.

HTML

<div id="one"></div><div id="two"></div>​

CSS

#one, #two {
    width: 100px;
    border: 1px solid black;
    display: inline-block;
}
#one {
    height: 200px;
}
#two {
    height: 100px;

    position: relative;
    left: -1px;
    background: white;
    border-left: none;
}​

jsFiddle Demo

Edit:

As thirdender mentioned, you can also use margin-left instead of a combination of position and left. This may be a better option for you depending on your previous styling and how the elements are arranged (probably better in most cases if margin-left is not already set).

Zach Shipley also made a good point about browser support for display: inline-block and added the following CSS:

*display: inline;
zoom: 1;
vertical-align: bottom;