Foros del Web » Creando para Internet » CSS »

problemas con alineacion de divs uno debajo del otro

Estas en el tema de problemas con alineacion de divs uno debajo del otro en el foro de CSS en Foros del Web. Buenas dias a todos; Tengo un problema con unas capas. Os adjunto el codigo por si alguien me puede hechar una mano, porque estoy desesperada. ...
  #1 (permalink)  
Antiguo 27/05/2008, 08:19
Avatar de susaninhax  
Fecha de Ingreso: noviembre-2004
Mensajes: 358
Antigüedad: 13 años
Puntos: 3
Pregunta problemas con alineacion de divs uno debajo del otro

Buenas dias a todos;

Tengo un problema con unas capas. Os adjunto el codigo por si alguien me puede hechar una mano, porque estoy desesperada. Me crea muchos conflictos. Pero es muy básico. No se que es lo que puede crear conflicto para que la capa "pie de pagina" se coloque debajo de la "capa contenido". No consigo alinear la capa pie de pagina debajo de la de contenidol. Alguien puede ayudarme?¿

Lo veo mal en firefox, me aparece el texto de pie de pagina debajo del resto como debe de ser, pero el background se ve mal..

En explorer lo veo correctamente. Pero necesito que se vea bien para firefox...

Algo asi:

GENERAL
CABECERA
CONTENIDO
PIE DE PAGINA
FIN GENERAL

Muchas gracias de antemano a todos. Un saludo!!!

Código HTML:
<div id="general" style="width:100%; margin:auto; float:none">


<!--/////////////////////////////// CABECERA //////////////////////////////////////-->
 	<div  id="cabecera" style="width:100%; margin:auto; float:none; height:25px;">
		<div style='width:15%; float:left; height:20px;'>vacio</div>
		

		<div style='width:6%; float:left; height:20px;'>SIPS-1</div>

		

		<div style='width:6%; float:left; height:20px;'>PRB-8</div>

		

		<div style='width:6%; float:left; height:20px;'>PRB2-9</div>

		

		<div style='width:6%; float:left; height:20px;'>PRB3-10</div>

				<div style='width:6%; float:left; height:20px;'>

		Total		</div>
	</div>

<!--/////////////////////////////// Fin de CABECERA //////////////////////////////////////-->

<!--/////////////////////////////// Comienzo contenido //////////////////////////////////////-->
	<div id="contenido"  style='width:100%;float:none; margin:auto;'>
		<div style='width:100%; float:left'>
			<div style='width:15%; height:25px; float:left'>Febrero de 2008</div>
		
			<div style='width:6%; height:25px; float:left;'>1</div>
			<div style='width:6%; height:25px; float:left;'>0</div>
			<div style='width:6%; height:25px; float:left;'>0</div>
			<div style='width:6%; height:25px; float:left;'>0</div>

			<div  style='width:20%; float:left; height:25px'>1</div>
				
		</div>
			
	</div>
<!--/////////////////////////////// Fin de contenido //////////////////////////////////////-->

<!--/////////////////////////////// PIE DE PAGINA //////////////////////////////////////-->

	<div id="pie_de_pagina" style=' background-color:#996666; width:100%; float:none; margin:auto; height:25px'>
	
		<div style="width:15%; height:25px; float:left">
	
		Total por Plat:
		</div>
	
		 <div style="width:6%; height:25px; float:left">2</div>
		 <div style="width:6%; height:25px; float:left">4</div>
		 <div style="width:6%; height:25px; float:left">2</div>
		 <div style="width:6%; height:25px; float:left">1</div>
		<div style="width:6%; height:25px; float:left">9</div>

	
	</div>
<!--///////////////////////////////FIN PIE DE PAGINA //////////////////////////////////////-->

</div> 

Última edición por susaninhax; 27/05/2008 a las 08:26
  #2 (permalink)  
Antiguo 27/05/2008, 10:57
 
Fecha de Ingreso: noviembre-2004
Mensajes: 18
Antigüedad: 13 años, 1 mes
Puntos: 0
Respuesta: problemas con alineacion de divs uno debajo del otro

Hola le problema lo tienes en flotar los elementos:
·el div-contenedor "general" no necesita flotar porque es un contenedor, ni necesita margin:auto porque estas diciendole que el ancho es el total de la ventana 100%
·los demas no necesitan margin auto ya que el contenedor ya no permite un margen (si Cabecera furera 30% si por ejemplo)
·los tres divs-caja deben flotar a la izquierda ya que como los tres son width:100% no caben uno al lado del otro y tiraran a encontrar espacio libre a la izquierda
· en alguna ocasión puedes necesitar hacer un br para forzar alinear el contenido posterior a tirar a la izquierda:
En el head
Código HTML:
<style type="text/css">
.clear{clear:both}
</style> 
En el body
Código HTML:
<div id="contenido">
</div>
<br style="clear:both" />
<div id="footer">
</div> 
.lo he probado en firefox, opera, i.explorer7 y safari

.Un consejo no repitas tanto código y pon el CSS en el HEAD o en una hoja de estilos aparte por ejemplo es lo mismo

Código HTML:
<style type="text/css">
.cabTitulos{float:left; text-align:center; width:70px; height:25px;}
</style>
 	<div id="cabecera" style="width:100%; float:left; height:25px;">
		<div style="width:15%; float:left; height:25px;">vacio</div>
		<div class="cabTitulos">SIPS-1</div>
		<div class="cabTitulos">PRB-8</div>
		<div class="cabTitulos">PRB2-9</div>
		<div class="cabTitulos">PRB3-10</div>
		<div class="cabTitulos">Total</div>
	</div> 
que lo has puesto tu en cabecera, pero así lo puedes aplicar a más páginas...

Código:
<div id="general" style="width:100%; >
	<!-- CABECERA -->
 	<div  id="cabecera" style="width:100%; margin:auto; float:left; height:25px;">
	<div style='width:15%; float:left; height:20px;'>vacio</div>
	<div style='width:6%; float:left; height:20px;'>SIPS-1</div>
	<div style='width:6%; float:left; height:20px;'>PRB-8</div>
	<div style='width:6%; float:left; height:20px;'>PRB2-9</div>
	<div style='width:6%; float:left; height:20px;'>PRB3-10</div>
	<div style='width:6%; float:left; height:20px;'>Total</div>
	</div>
	<!-- /Cabecera -->

	<!-- Comienzo contenido -->
	<div id="contenido"  style="width:100%; float:left;">
		<div style="width:100%; float:left">
	<div style='width:15%; height:25px; float:left'>Febrero de 2008</div>
		
	<div style='width:6%; height:25px; float:left;'>1</div>
	<div style='width:6%; height:25px; float:left;'>0</div>
	<div style='width:6%; height:25px; float:left;'>0</div>
	<div style='width:6%; height:25px; float:left;'>0</div>
	<div  style='width:20%; float:left; height:25px'>1</div>				
	</div>
			
	</div>
	<!-- /contenido -->

	<!-- Pie de página-->
	<div id="pie_de_pagina" style=" float:left; background-color:#996666; width:100%; float:left;  height:25px">
	
	<div style="width:15%; height:25px;">
	Total por Plat:
	</div>
	
	<div style="width:6%; height:25px; float:left">2</div>
	<div style="width:6%; height:25px; float:left">4</div>
	<div style="width:6%; height:25px; float:left">2</div>
	<div style="width:6%; height:25px; float:left">1</div>
               <div style="width:6%; height:25px; float:left">9</div>
	
	</div>
<!-- /Pie de página -->
</div>
en fin espero te sirva
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 13:24.