Ver Mensaje Individual
  #2 (permalink)  
Antiguo 27/05/2008, 09:57
j0rmaz
 
Fecha de Ingreso: noviembre-2004
Mensajes: 18
Antigüedad: 19 años, 4 meses
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