Move Div up by 20px - But keep the border

Question

i have three <div>s and want to move the second one up.

Currently i'm doing this with position: relative; top: -20px; - That works pretty well.

Only downside is: There's a gap (of 20px) between the second <div> and the third <div> (which is under the second div).

So, i want to keep the border around all three divs, so that top: -20px is not an alternative for the third row.

I have this illustrated here: http://jsfiddle.net/w2PGF/1/

My Markup:

<div id="border">
    <div class="firstRow">foo</div>
    <div class="secondRow">bar</div>
    <div class="thirdRow">foobar</div>
</div>​

My CSS:

#border {
    border: 5px solid #000;
}
.firstRow {
    background-color: cyan;
    border: 3px solid red;
    height: 50px;
}
.secondRow {
    position: relative;
    top: -20px;
    border: 3px solid yellow;
    background-color: grey;
    height: 50px;
}
.thirdRow {
    background-color: blue;
    border: 3px solid blue;
    height: 50px;
}

Thanks in advance. ​

Answer 1

.secondRow { margin-bottom: -20px }

Answer 2

Remove the position: relative and instead of top: -20px you should add margin-top: -20px

Like so: fiddle