Question

I have two divs with borders, how do I remove only the border where the 2 divs touch like the picture below shows? But without background overlapping, I mean here background must be transparent.
Question sounds seam like this one Partial Border in CSS but!! without background color overlapping. and also it’s liquid dimension, mean not fixed.

Answer 1

If your divs are both static height, you can use a pseudo element to fake the border:

div {
    border: 1px solid black;
}
#small {
    border-right-width: 0;
    height: 80px;
}
#big {
    border-left-width: 0;
    height: 200px;
    position: relative;
}
#big:before {
    content: ' ';
    border-left: 1px solid black;
    position: absolute;
    height: 120px;
    left: 0; top: 80px;
}

Here’s the fiddle: http://jsfiddle.net/FrKZy/

You could probably make it work with dynamic heights using Javascript.

---

Warning: this won’t work in IE7 or under.