Knapper flytter sig efter placering

<style type="text/css">
div.hidden {
    visibility: hidden;
}
</style>

<script type="text/javascript">
function showDiv(id) {
    document.getElementById(id).style.visibility = "visible";
}
function hideDiv(id) {
    document.getElementById(id).style.visibility = "hidden";
}
</script>

<div onmouseover="showDiv('subDiv_1')" onmouseout="hideDiv('subDiv_1')">DIV #1
    <div id="subDiv_1" class="hidden">Ekstra info for DIV #1</div>
<div>

<div onmouseover="showDiv('subDiv_2')" onmouseout="hideDiv('subDiv_2')">DIV #2
    <div id="subDiv_2" class="hidden">Ekstra info for DIV #2</div>
<div>

<div onmouseover="showDiv('subDiv_3')" onmouseout="hideDiv('subDiv_3')">DIV #3
    <div id="subDiv_3" class="hidden">Ekstra info for DIV #3</div>
<div>

<div onmouseover="showDiv('subDiv_1')" onmouseout="hideDiv('subDiv_1')">DIV #1
    <div id="subDiv_1" class="hidden">Ekstra info for DIV #1</div>
</div>

<div onmouseover="showDiv('subDiv_2')" onmouseout="hideDiv('subDiv_2')">DIV #2
    <div id="subDiv_2" class="hidden">Ekstra info for DIV #2</div>
</div>

<div onmouseover="showDiv('subDiv_3')" onmouseout="hideDiv('subDiv_3')">DIV #3
    <div id="subDiv_3" class="hidden">Ekstra info for DIV #3</div>
</div>