Center align two divs will not work? - css

Question

Why is the two boxes to the right side, and not centered align?
fiddle: http://jsfiddle.net/gh76q/1/
I, tried change the position of box 2 to relative, it will do the trick but the box moves when hovering the box 1.
HTML:
<div align="center" id="top-link">
<div class="switch">
<div class="avg_display">Box 1</div>
<div class="avg_hide">Box1 info<br></div></div>
<div class="link-block">Box2</div>
</div>
CSS:
#top-link {padding-bottom:40px;}
.switch {display:inline-block;}
.link-block {
display: inline-block;
padding: 20px 20px 20px 20px;
border: 2px solid #e7e7e7;
border-radius: 5px;
height:25px;
width:200px;
text-align:center;
margin-top:10px;
margin-right:20px;
position:absolute;
color:#555;
}
.link-block a {
text-align: center;
vertical-align: middle;
line-height: 25px;
color:#555;
}
.link-block:hover {
background-color:#1396d0;
border:2px solid #1396d0;
color:#fff;
margin-top:10px;
margin-right:20px;
}
.link-block:hover a{
color:#fff;
}
.avg_display {
display:inline-block;
padding: 20px 20px 20px 20px;
border: 2px solid #e7e7e7;
border-radius: 5px;
height:25px;
width:200px;
text-align:center;
margin-top:10px;
margin-right:20px;
}
.avg_hide {
display:none;
padding: 20px 20px 20px 20px;
background-color:#1396d0;
border:2px solid #1396d0;
color:#fff;
border-radius: 5px;
height:250px;
width:200px;
text-align:center;
margin-top:10px;
margin-right:20px;
}
.avg_display a {
text-align: center;
vertical-align: middle;
line-height: 25px;
color:#555;
}
Fiddle:

Answer 1

Remove position:absolute from the box2 class.
.link-block {
display: inline-block;
padding: 20px 20px 20px 20px;
border: 2px solid #e7e7e7;
border-radius: 5px;
height:25px;
width:200px;
text-align:center;
margin-top:10px;
margin-right:20px;
/*position:absolute;*/
vertical-align:top; /* Keep the box always on top */
color:#555;
}
DEMO