CODEWITHSUNDEEP
htmlcss
Tony_Henrich
Tony_Henrich

Reputation: 44085

How to not display common border between two adjacent divs?

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?

enter image description here

Upvotes: 5

Views: 3631

Answers (4)

Zhihao
Zhihao

Reputation: 14747

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;

Upvotes: 2

Zach Shipley
Zach Shipley

Reputation: 1092

Going by your comments under your question, @Tony_Henrich, in this situation I'd normally "fake" it by making the border-left-color of the smaller div equal to the two divs' background-color. Then set position: relative and left: -<border-width value> on the smaller div so it overlaps the larger one.

Here's a jsfiddle: http://jsfiddle.net/5Q3A5/

Upvotes: 0

Lukas
Lukas

Reputation: 7734

set border-right: ... border-left: ...

Upvotes: 0

cobaco
cobaco

Reputation: 10546

position the smaller div on the right to overlap the border of the left div, and make sure it doesn have border-left set

Upvotes: 0

Related Questions