CODEWITHSUNDEEP
htmlcss
Somk
Somk

Reputation: 12047

How can 2 divs have 1 border

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.

Upvotes: 5

Views: 8890

Answers (4)

thewebguy
thewebguy

Reputation: 1520

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/

Upvotes: 9

Manish Sharma
Manish Sharma

Reputation: 1720

try this one

http://jsfiddle.net/D74mj/

i hope that's the result you requried

Upvotes: 0

Nick Kugaevsky
Nick Kugaevsky

Reputation: 2945

It seems that the simplest way to solve your problem is to set negative margins to active div. You code may look like this

# HTML
​<div class='menu'>
    <div class='item'>
        Item 1
    </div>
    <div class='item active'>
        Item 2
    </div>
    <div class='item'>
        Item 3
    </div>
    <div class='item'>
        Item 4
    </div>
</div>​

# CSS
.menu {
    position: relative;
}

.menu .item {
    display: inline;
    border: 1px solid black;
    position: relative;
    z-index:1;
}

.menu .item.active {
    border: 1px solid red;
    z-index: 2;
    margin: 0 -1px;
}

Using divs for your purpose is not looks html semantic to me. I think it will be better to use list for navigation.

PS Here is this code in action – http://jsfiddle.net/r8XRP/ ​

Upvotes: 0

Pebbl
Pebbl

Reputation: 36005

By using a combination of negative margins (the same dimension as your border) and a singular z-index for the selected div you can achieve the layout you are looking for.

image of divs with "shared" border

<style>
   .box { 
     width: 50px;
     height: 50px;
     float: left;
     border: 5px solid black;
     margin-left: -5px;
   }

   .selected {
     position: relative;
     width: 50px;
     height: 50px;
     border: 5px solid red;
     z-index: 20;
   }
</style>

<div>
  <div class="box"></div>
  <div class="box selected"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

The above method should be reliable in all mainstream browsers from IE7 upwards... I should imagine it should work for IE6 too but I don't have it to hand to test.

Upvotes: 5

Related Questions