Lo que pasa es que al crear un div grande con 3 sub divs dentro, a la hora de hacer pequeña la pantalla estos iconos del medio se empalman con el logo... quisiera saber si hay algún método para evitar o darle un límite y que esto no suceda.
Aquí se puede apreciar la sobreposiciòn de las imagenes con el logo.
Les dejo el código: http://jsfiddle.net/6ErSD/
HTML:
<div id="header">
<div id="leftdiv">
<div id="vacio1"></div>
<div id="logo"></div>
<div id="vacio2"></div>
</div>
<div id="centdiv">
<div id="vacio4"></div>
<div id="iconbox">
<div id="icon">
<img src="http://www.markusweimar.de/static/safesleeponce_icon.png" width="60"></img>
</div>
<div id="icon">
<img src="http://activedisclosure.com/wp-content/uploads/icBig_video.png" width="60"></img>
</div>
<div id="icon">
<img src="http://www.prosemedia.com/wp-content/uploads/2013/02/Prose-Icon-Technical-Writing-80x80.png" width="60"></img>
</div>
<div id="icon">
<img src="http://readon.education.wisc.edu/wp-content/uploads/2011/08/Icon_Intermediate1.png" width="60"></img>
</div>
<div id="icon">
<img src="http://forums.wpcentral.com/attachments/samsung-ativ-s/49834d1384684627t-settings_icon.jpg" width="60"></img>
</div>
<div id="icon">
<img src="http://activedisclosure.com/wp-content/uploads/icBig_video.png" width="60"></img>
</div>
</div>
</div>
<div id="rightdiv">
<div id="username">usuario / log off</div>
<div id="vacio3"></div>
</div>
</div>
CSS:
#header {position:static; height: 121px; background-color:#022252;}
#leftdiv {float: left;width:20%; height:121px;}
#vacio1 { width:232px; height:22px;}
#logo {float: left;width:232px; height:69px; background: url(http://upload.wikimedia.org/wikipedia/en/8/88/Transdev_YB_logo.png) no-repeat;}
#vacio2 {float: left; width:232px; height:8px; }
/***********************************************************************************************/
#centdiv {float: left; width:70%; height:121px; text-align:center;}
#vacio4 { height:22px;}
#iconbox {width: 480px; height: 80px;margin-left: auto; margin-right: auto;}
#icon {float: left; width:80px; height:80px; text-align:center; cursor: pointer;}
/***********************************************************************************************/
#rightdiv {float: right;width:10%; height:121px;}
#username {float: left; width:232px; height:21px; color:white; text-align:center; }
#vacio3 {float: left; width:232px; height:100px; }
MUCHAS GRACIAS
