Foros del Web » Creando para Internet » CSS »

Problema de distribución de capas

Estas en el tema de Problema de distribución de capas en el foro de CSS en Foros del Web. Tengo el siguiente código HTML: Código: <div id="contenido"> <div id="superior"> <p>Aquí va una introducción a modo de titular o de resumen</p> </div> <div id="izquierda"> <h4>Título ...
  #1 (permalink)  
Antiguo 15/04/2004, 03:38
Avatar de Cain  
Fecha de Ingreso: enero-2002
Ubicación: Catalunya
Mensajes: 6.459
Antigüedad: 22 años, 3 meses
Puntos: 17
Problema de distribución de capas

Tengo el siguiente código HTML:

Código:
<div id="contenido">
	<div id="superior">
		<p>Aquí va una introducción a modo de titular o de resumen</p>
	</div>

	<div id="izquierda">
		<h4>Título 1</h4>
		<p>Aliquam sagittis ipsum vel urna. Nam elit. Morbi in metus. Aenean at nunc vel felis euismod mattis. Pellentesque ligula. Proin tempus libero. Donec nunc eros, tempus non, cursus sed, ullamcorper nec, dui. Donec mi est, porttitor et, mollis ut, elementum non, est. Sed laoreet tincidunt mi. Sed varius mi id wisi.</p>
		<h4>Título 2</h4>
		<p>Donec lobortis risus sed diam. Duis non tellus. Cras placerat urna eu eros. Phasellus wisi nibh, iaculis nec, volutpat a, vulputate a, felis. Nunc elementum est non diam viverra tempor. Aliquam erat volutpat. Mauris ligula ipsum, lacinia sed, laoreet vel, interdum et, elit. Aliquam lacinia pretium libero.</p>
	</div>

	<div id="derecha">
		<h4>Título 3</h4>
		<p>In commodo neque et arcu. Aliquam pharetra ipsum vel velit. Phasellus felis justo, aliquam vitae, interdum ac, sollicitudin vel, metus. Fusce lacinia, lorem et accumsan fermentum, diam massa adipiscing turpis, sed pretium ipsum nibh nec lectus. Vestibulum dapibus metus at nibh.</p>
		<h4>Título 4</h4>
		<p>Nam vitae massa vitae augue sollicitudin euismod. Aenean dictum risus id nisl. Nam id mauris quis massa mattis mollis. In ut velit vel magna sagittis congue. In lobortis. Sed tempus. Praesent tortor turpis, lobortis ut, volutpat vel, lobortis a, nisl.</p>
	</div>

	<div id="inferior">
		<a href="mas.htm" class="siguiente">siguiente</a>
	</div>
</div>
Que funciona con el siguiente CSS:
Código:
<style>
div#contenido {
	width: 720px;

}

div#superior {
	width: 651px;
	border-top: 12px solid white;
	border-bottom: 12px solid white;
}

div#izquierda {
	width: 303px;
	float: left;
}

div#derecha {
	width: 303px;
	float: right;
}

div#inferior {
	float: right;
}
</style>
Pero me surgen 2 problemas que tal vez podais resolverme:

1) En Internet Explorer el div contenido se alarga tanto como sea necesario para contener a sus divs hijos, pero Mozilla no. En Mozilla los divs con float sobresalen del div contenido.
¿Es posible acomodar los divs izquierda y derecha dentro del div contenido y que sigan quedando uno a la izquierda y otro a la derecha?

2) Quiero que el div inferior quede justo debajo de los divs izquierda y derecha y que se alinee a la derecha. ¿Como lo hago? Con ese CSS se queda a la izquierda del div derecha y no sé porqué

Gracias por la atención y espero que podais ayudarme.
__________________
M a l d i t o F r i k i
  #2 (permalink)  
Antiguo 15/04/2004, 03:51
Avatar de Cain  
Fecha de Ingreso: enero-2002
Ubicación: Catalunya
Mensajes: 6.459
Antigüedad: 22 años, 3 meses
Puntos: 17
Para que mi mensaje sea más fácil de entender, os pongo 3 imágenes:

1) Como debería ser:


2) Como es en IE:


3) Como es en Mozilla Firefox:
__________________
M a l d i t o F r i k i
  #3 (permalink)  
Antiguo 15/04/2004, 10:34
 
Fecha de Ingreso: agosto-2003
Mensajes: 499
Antigüedad: 20 años, 8 meses
Puntos: 1
div#inferior {
text-align:right;
clear:both;
}
__________________
Plaza Mozilla
http://www.chevrel.org/es/noticias/
  #4 (permalink)  
Antiguo 15/04/2004, 10:51
Avatar de Cain  
Fecha de Ingreso: enero-2002
Ubicación: Catalunya
Mensajes: 6.459
Antigüedad: 22 años, 3 meses
Puntos: 17
De acuerdo Muchísimas gracias

Muchas gracias PascalC, ha quedado perfecto en ambos navegadores
__________________
M a l d i t o F r i k i
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:34.