problemas css firefox alinear capas

[Pez_del_Web]

tengo problemas a la hora de alinear los divs

en ie se ve perfecto pero en ff3 na de ná

Imagen Ilustrativa :X


HTML

Código:

<div id="contenedor">
		<center>
			<div id="menu_izquierda">
				probando izquierda <br> y salto
			</div>

			<div id="contenido" class="tcenter">
				centrito
			</div>

			<div id="menu_derecha">
				probando derecha <br> y salto
			</div>
		</center>
</div>

CSS

Código:

* {
	margin: 0px;
	padding: 0px;
}


body{
	width: 100%;
}

#contenedor{
	text-align: center;
	width: 100%;
}

#menu_izquierda{
	display: inline;
	width: 150px;
	border: #FF0066 1px solid;
}

#contenido{
	display: inline;
	width: 290px;
	min-width: 150px;
	border: #00CC33 1px solid;
}

#menu_derecha{
	display: inline;
	min-width: 150px;
	width: 150px;
	border: #0000FF 1px solid;
}

[FatalError]

Prueba añadiendo esto:


#menu_izquierda{
float: left;
display: inline;
width: 150px;
border: #FF0066 1px solid;
}

#contenido{
float:left;
display: inline;
width: 290px;
min-width: 150px;
border: #00CC33 1px solid;
}

#menu_derecha{
float: left;
display: inline;
min-width: 150px;
width: 150px;
border: #0000FF 1px solid;
}

[ircop]

estoy exactamente igual que tu, en una web

en I.E, se ve perfecto y en Firefox los divs se meten uno debajo de otro.


una cosa que es

display:inline

salu2

[Pez_del_Web]

Iniciado por ircop

estoy exactamente igual que tu, en una web

en I.E, se ve perfecto y en Firefox los divs se meten uno debajo de otro.


una cosa que es

display:inline

salu2

el display: inline les obliga a no dar el "salto de línea" automático que tienen algunas etiquetas, así en vez de ponerse los divs en vertical (uno debajo del otro) se ponen en horizontal (uno al lado del otro) inline=misma línea


muchas gracias fatalerror por lo del float, así se solventa el problema que planteo

ahora supongo que cuando se alargue la página tendré problemas con que el div contenedor no se alargará como debe, no?

[FatalError]

para que se alargue el contenedor pon esto:


#contenedor{
text-align: center;
width: 100%;
overflow: hidden;
}

[Pez_del_Web]

Iniciado por FatalError

para que se alargue el contenedor pon esto:


#contenedor{
text-align: center;
width: 100%;
overflow: hidden;
}

joer lo que he aprendido hoy :D

muchas gracias!!

[Pez_del_Web]

saludos otra vez
tengo otra preguntilla del mismo tema,
¿por qué cuando dejo vacía la capa contenido se replega si tengo puesto width: 290px; ? ¿cómo puedo solventarlo?

en ie lo respeta pero ff se lo pasa por la gaita

[kseso?]

Hola Pez_del_Web:
Puede que sea por
#contenido{
float:left;
display: inline;
width: 290px;
min-width: 150px;
border: #00CC33 1px solid;
}
que FF sí lo entiende pero IE no. Hay un post reciente donde se aclaraba el tema (creo recordar que la guinda la puso Mikmoro)
Saludos

[Pez_del_Web]

gracias por la ayuda

disculpen mi reiterada ignorancia,
ahora me aparece otro problema que no he podido resolver, me gustaría que el menu_izquierda y menu_derecho se alargasen con la altura del div contenido,
¿esto se puede hacer desde css? ¿o lo hago desde javascript?

lo ideal sería hacerlo con un height: '100%'; pero no lo admite