Why is a sliver of space appearing between two divs stacked on top of each other

Question

I have a scrollbar script running inside a div, looking nice. I was asked to add a trackbar underneath the scroll bar that is styled differently than the trackbar that came with the script. They want the scrollbar to look like it's sliding inside a track, so that's the reason for doing this extra stuff.

The whole point being not to use images, I designed a CSS3 styled trackbar and put it to the right and underneath where the scrollbar sits. I got it all lined up, but can't for the life of me see where the little space is coming from between the blue background color of the main div and the trackbar div. Why is there a sliver of white between the blue and the trackbar?

Here's a fiddle, or here's the test page (it's the blue one in the upper right).

I feel like it must be right under my nose. But I've been Firebugging it to death and though I can get the paragraphs, links, and headers to extend underneath the bar (to prove to myself I can get stuff underneath the trackbar), I can't get the blue to go underneath. I'm positive it has something to do with the double float: right settings, but I thought I could override that with position, z-index. Only I can't.

I'm totally open to being told "you're doing it completely wrong." I'm willing to re-tool my whole approach.

CSS for trackbar (minus the gradient stuff):

.trackbar {
    width: 17px;
    height: 277px;
    float: right;
    margin-right: -20px;
    z-index: 20;
}

CSS for the blue div

.whatsnew {
    background-color: #DEE9F3;
    border-bottom: 1px solid #7E99CE;
    border-top: 1px solid #7E99CE;
    float: right;
    height: 276px;
    margin: 0 20px 0 0;
    padding: 0;
    position: relative;
    width: 290px;
    z-index: 10;
}

Answer 1

The Mysterious White Gap

You have the Trackbar floating to the right in an area that is 3px larger than the trackbar itself. If the trackbar needs to be 17px, reduce the 20px margin for the outer container and corresponding -20px margin for the trackbar to 17px and -17px, respectively.

The parent div is 310px, the div to the left is only 290px, but your trackbar is only 17px (instead of the remaining 20px).

Alternate Solution

An alternate solution would be to provide a background color for the parent div so the blue color also goes behind the trackbar.

Debugging CSS/Positioning

A handy way to debug issues like this is to use Chrome's debugger. Press F12 in Chrome and select the little magnifying glass icon in the bottom left corner. You can move the mouse over gaps on the page and see what is creating that space.

You can also look at the Computed Style section on the right side of the Elements tab to see exactly what values a DOM node has for each property and what is causing/influencing those properties.

Firebug has an Inspect function which should behave similarly.

Answer 2

Okay, I got it with help from Corion and Kevin B.

Both were right, to take the -20px margin down to -17px.

Then I had to go from there and take the margin on the blue box (.whatsnew) down to 17. Now the white sliver is gone. I couldn't get to that point without those two helping me see the 17px thing.

Thanks!