display: inline + width y height

[macaco]

Tengo 4 layers (div) que deben medir 60x90 px y estar uno al lado del otro separados por 10 o 20 px.

este es mi codigo:

Código:

<div id='header'><img src='logo'><div class='menu verde'>Empresa</div><div class='menu azul'>Productos</div><div class='menu indigo'>Novedades</div><div class='menu violeta'>Contacto</div></div>

.menu{
	color:#FFFFFF;
	height:60px;
	padding:5px;
	text-align:right;
	vertical-align:bottom;
	width:90px;
	font-size: 9pt;
	font-weight: bold;
	margin: 10px;
}
.verde{
	background: url(img/degradeVerde.png) repeat-x top left;
}
.azul{
	background: url(img/degradeAzul.png) repeat-x top left;
}
.indigo{
	background: url(img/degradeIndigo.png) repeat-x top left;
}
.violeta{
	background: url(img/degradeVioleta.png) repeat-x top left;
}

El tema es que los layers tienen display:block. Si lo cambio a inline o pongo spans, no puedo asignarle ancho ni alto.

display: inline-block trae muchos problemas con los navegadores.

Alguna solucion?

[fearlex]

Si usas float, podras hacer lo que pretendes.

float: left a cada uno. Suerte

:D

[macaco]

Buenisimo, con eso se alinearon bien.
Muchas Gracias!!

[demux]

A mi también me sirvió. Grande! :)