Question

Imagine 4 boxes side by side (divs). These are a menu and when one box is selected its border is red and all the other divs borders are black. The problem I have is, is there an easy way to make it so the neighbouring divs to the selected one don’t have a black border on the side that touches the selected div. This is because then you would have a selected div with red borders have a second border of a black line which I don’t want.

How can you make 2 divs act as if they have a single border?

I am trying to get what I have here perfected.

http://jsfiddle.net/hCK3D/1/

At the moment the white vertical borders interrupt the horizontal grey. This should not be the case, but I do no know how to change that.

Answer 1

You should use the adjacent selector (+) in CSS to make this happen. Check it out, four items:

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

Here’s your CSS:

​.item {
    float:left;
    background: #ccc;
    width: 50px;
    height: 50px;
    border: 1px #000 solid;
    border-right-width: 0;
}

.item:last-child {
    border-right-width: 1px;
}

.item:hover {
    border: 1px #f00 solid;
}

.item:hover + .item {
    border-left-width: 0;
}

​.item just sets up each item normally. It makes the right border 0.

.item:last-child makes it so that the last one has a borer on the right, since it’s the last one and won’t have a div next to it to simulate a border.

.item:hover makes the hovered item have a red border, and it’s all 4 sizes

.item:hover +.item grabs the next item in the list and gets rid of its left border since the item just to the left of it now has a red border there.

You can try it here: http://jsfiddle.net/hCK3D/

Edit: This one should do the trick! http://jsfiddle.net/hCK3D/7/