CSS: Overlapping borders

css

Solution

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;
}
​

Problem

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: https://i.stack.imgur.com/gF2QX.jpg 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.

Original source