CSS: Overlapping borders

Question

I just stumbled on a problem where the shared border between a menu bar and the main content box does not go on properly (as the content box is too small)

Image: http://imgur.com/O3ra9

Code: http://jsfiddle.net/gh55e/2/

So I was wondering if there was a way to fix the border. Maybe by giving them both one and making it overlap? Just have no idea how to do this as margin -x doesn't work.

Answer 1

Give the right element a border all around, then use the margin-top and margin-left properties in the negatives to make them overlap. Here's an updated jsfiddle:

http://jsfiddle.net/gh55e/4/

CSS:

#right {
    width: 85px;
    float: right;
    background-color: #e1e1e1;
    padding: 0px 10px 10px 10px;
    margin-top: -54px;
}
​