CODEWITHSUNDEEP
css
Coolcrab
Coolcrab

Reputation: 2723

CSS: Overlapping borders

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.sstatic.net/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.

Upvotes: 10

Views: 45336

Answers (2)

Coolcrab
Coolcrab

Reputation: 2723

For later visitors, this is the CSS that eventually fixed it.

#right {
    width: 385px;
    float: right;
    background-color: #e1e1e1;
    padding: 0px 10px 10px 10px;
    margin-left: -10px;
}

You basically make a margin of 10px and move it back for 10 px

Upvotes: 1

alt
alt

Reputation: 13907

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

Upvotes: 22

Related Questions