Foros del Web - problemas con alineacion de divs uno debajo del otro

Foros del Web (http://www.forosdelweb.com/)

- CSS (http://www.forosdelweb.com/f53/)

- - problemas con alineacion de divs uno debajo del otro (http://www.forosdelweb.com/f53/problemas-con-alineacion-divs-uno-debajo-del-otro-590452/)

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?¿ :borracho:

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>

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