Question

I have the below setup running. It should appear as described below.
http://jsfiddle.net/maxjs/3Wk9F/7/

A main container of 780px contains some tabs and on hover they change colour.

The filler on the left should be 29px
The filler on the right should be 30px
The 4 boxes should be 179px each and there should be 5 1px borders. 1 inbetween each section.

But at the moment when I hover a box it becomes 178px and as you can see there is a permanant 1 px off on the right.

Can someone please tell me if I have overlooked something very simple.

HTML

<div id="maincontainer">
<div class="tab-container">
    <div class="leftfiller"></div>
    <div class="tab"></div>
    <div class="tab"></div>
    <div class="tab"></div>
    <div class="tab"></div>
    <div class="rightfiller"></div>
</div>
<div style="clear:both"></div>​

CSS

#maincontainer{
    padding-top:20px;
    width: 780px;
    margin: 0 auto;
    background-color:#000;
    height:600px;
}
.tab-container {
    border-bottom: 1px #BCC0C3 solid;
    border-top: 1px #BCC0C3 solid;
    height:110px;
}
.tab{
    float:left;
    width:180px;
    height:110px;
    background-color:#E5E5E5;
    border-left: 1px #fff solid;
    box-sizing: border-box;
}

.tab:hover {
    background:#fff;
    border-left:1px #BDC0C5 solid;
    border-right:1px #BDC0C5 solid;
    height:111px;
}

.tab:hover + .tab {
    border-left-width: 0;
}
.leftfiller{
float:left;
width:29px;
height:110px;
background-color:#E5E5E5;
}
.rightfiller{
float:right;
width:30px;
height:110px;
background-color:#E5E5E5;
}​

Answer 1

.tagdoes not have a border-right at start, but with the hover, you add that extra border making it an extra px. Pushing the width to one px less. I think that is your problem.