Move Div up by 20px - But keep the border - html

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

Answer 3

You need to remove the top: -20px and add margin-top: -20px to .secondRow
So .secondRow would look like this:
.
secondRow {
margin-top: -20px;
border: 3px solid yellow;
background-color: grey;
height: 50px;
}
Check this JSFiddle: http://jsfiddle.net/w2PGF/6/