Yo diría que si deben mantener la distancia entre ellas, una manera de hacerlo sería añadir una caja que sirva para centrar:
Cita: <div class="subcontainer2">
<div class="centrador">
<div id="v" class="buttonClicked" onmouseover="function1('v')" onmouseout="function2('v')"
onclick="function3('v')">
<img id="imgV" src="Resources/imgs/vertical.png" height="100" />
<div>
<label>
<strong>Vertical</strong></label></div>
</div>
<div id="h" class="buttonNormal" onmouseover="function1('h')" onmouseout="function2('h')"
onclick="function3('h')">
<img id="imgH" src="Resources/imgs/horitzontal.png" height="100" />
<div>
<label>
<strong>Horizontal</strong></label></div>
</div>
</div>
</div>
y en la CSS hacer estos cambios:
Cita: .buttonNormal{float:left;
width:110px;
height:125px;
border:1px solid #000;
background-color:#E2EBED;
font-family:Arial;
font-size:small;
color:Gray;
text-align:center;
margin: 20px 0 20px 40px;
}
.buttonClicked{float:left;
width:110px;
height:125px;
border:1px solid #000;
background-color:#FF6633;
font-family:Arial;
font-size:small;
color:#DDDDDD;
text-align:center;
margin: 20px 0 0;
}
.centrador {width: 264px;
margin: 0 auto;
}