footer se sobrepone a otros divs. Divs no llegan al final de la pagina.

neoarcangel · #1 (**permalink**) 23/05/2014, 05:19

Hola, llevo 3 dias mirando un codigo y no consigo descifrar que he hecho mal.
He probado borrando codigo y añadiendolo poco a poco y aunque veo algo claro no consigo saber que condiciona a que el footer suba o baje en funcion de el sidebar o barra derecha donde estan las categorias.

De todas maneras este comportamiento es debido a que tanto el div principal como el div main no llegan al final de la pagina, se quedan hasta la mitad, y lo he modificado ya con tantos parametros que no veo solucion.
He contado los div en notepad++ abiertos y cerrados y me salen los mismos.
He comprobado mediante validadores los css haber si habia algun error, y no me ha encontrado ningun error.
Como digo, yo pienso que es del div principal o del div main, no se por que no llegan hasta el final de la pagina.
Mis css, la pagina y los menus

Como no me deja postear tanto texto, las subo a un pequeño archivo.
neopag.zip
Espero me podais ayudar.
Gracias.

pzin · #2 (**permalink**) 23/05/2014, 06:08

Sin ver el código (no soy tan valiente de descargar cualquier cosa) suena a que te falta limpiar el flotado por algún sitio.

Al elemento que contenga el sitio, añádele:

Código CSS:

Ver originaloverflow: hidden;

Si no tiene altura definida ese elemento, debería de funcionar si es eso.

neoarcangel · #3 (**permalink**) 23/05/2014, 09:37

Yo queria poner el codigo pero no he podido por que me dice que es demasiado largo, es por ello que lo he subido a ese archivo.
He probado con el overflow:hidden, y lo que hace es ocultarme lo que esta por debajo del contenedor, que en este caso no funciona por que el contenedor principal no abarca todo el contenido, si no que se cierra casi a mitad del sitio.
He reducido algo de codigo, para postearlo aqui, tambien he añadido bordes a las tablas para que veais como el contenedor principal se queda a mitad.

NOTICIAS.PHP

Código HTML:

<?php 
require_once('class/class.php');
$instantrabajo=new Trabajo();
?>


<html>

<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=UTF-8">
<title>CREACION DE BLOG</title>

<link href="css/estilos.css" type="text/css" rel="stylesheet" />
</head>
<body>
<center>
<div id="principal">
	<div id="cabecera"> cabecera</div>
	<div id="main">
			<!-- *****************MENU************************ -->
		<div id="menu">
		<?php 
		//incluimos el menu que esta en menu.php
			include('menu.php');
			?>
		<!-- *****************FIN DE MENU************************ -->	
		
		<!-- *****************BUSCADOR************************ -->
			<div id="buscador">
				<form name="buscar">
				<input type="text" name="s" />
					<a href="">
					<img src="img/buscarimg.png" border="0"></img>
					</a>
				</form>
			</div>
		</div>
		<!-- *****************FIN DE BUSCADOR************************ -->
		<div id="contenidosecun">
			<div id="contenedor">
				<div id="div_paginacion_post">
					<!------------------------------detalle del post----------------------------->
					<div id="div_post_top"></div><!----separador----->
					<div id="div_contenedor_post">	
						<div id="div_post_titulo">
								<div id="div_post_titulo_texto">
								TITULO DE NUESTRO POST.
								</div>
								<div id="div_post_titulo_fecha">
									Martes, 20 de mayo de 2014
								</div>
						</div>
						
					
						
						<div id="div_post_contenedor_detalle">	
							<!-- <div class="div_separador_detalle_post"></div> -->
								<div id="div_detalle_post">
										DETALLE DEL POST	
										<hr>
										OTRO DETALLE
										<hr>
									<div id="contenedor_descarga_categoria_post">
											<div id="div_categoria_post">
													categoria: PHP
											</div>
											
											<div id="div_descarga_post">
													<a href="">DESCARGAR</a>
											</div>
									</div>	
												<br />
												<br />
												<hr />
									<div id="div_form_comentarios">
										<form name="form"action="" method="POST">
																<br />
											Nombre:&nbsp;&nbsp;
											<input type="text" name="nom" title="nombre" />
																<br />
																<br />
											E-Mail:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
												<input type="text" name="correo" title="E-mail" /> no sera publicado
																<br />
																<br />
											Sitio Web:
												<input type="text" name="web" title="Sitio web" />
																<br />
																<br />
																
											<div id="div_textarea_msg_1">Mensaje:</div>
												<textarea name="mensaje" cols="40" rows="10" title=""></textarea>
																<br />
																<br />
												<input type="button" value="Insertar Comentario" title="Insertar Comentario" onclick=""/>
										</form>
									</div>
									
									<div id="div_comentarios_post">
										<?php
											for($i=0;$i<30;$i++)
											{
											?>
													
													<a href="">pruebax</a><br/>
										<?php
											}
											?>
									</div>
									<br />
								</div>
								
							<div class="div_separador_detalle_post"></div>
						</div>
						</div>

					</div>
			</div>
			
			
			<div id="sidebar">
			
			<!--PRIMERA CAJA WIDGET-->
				<div id="separador_widget"></div>
				<div id="widget">
					
					
					
						<div id="caja_widget">
							<div id="titulo_widget">Categorias</div>
							<?php 
							$categorias=$instantrabajo->listar_categorias();
						for($i=0;$i<sizeof($categorias);$i++)
						{
						?>
							<a href="http://localhost/pruebas/tutorial12/?cat=<?php echo $categorias[$i]["id_categoria"];?>
									"title="<?php echo $categorias[$i]["categoria"];?>">
							<div id="contenido_widget"><?php echo $categorias[$i]["categoria"];?></div>
							</a>
						<?php 
						}
						?>
						
						</div>
					
					<div class="separador_lateral_widget"></div>
						
				</div>
				
					<!--SEGUNDA CAJA WIDGET-->
				<div id="separador_widget"></div>
				<div id="widget">
					<div id="caja_widget">
							<div id="titulo_widget">SUBCATEGORIAS</div>
									<?php 
											for($i=0;$i<10;$i++)
											{
									?>
							<div id="contenido_widget">ASP</div>
									<?php 
											}
									?>
					</div>
					
					<div class="separador_lateral_widget"></div>
						
				</div>
				
			</div>
														<div id="footer_separador"></div>
								<div id="footer">
					<hr/>
					&copy Desarrollado por Neoarcangel <?php echo date("Y");?>
				</div>
		</div>
	</div>
		

</div>
</center>
</body>
</html>

CSS

Código HTML:

body{margin-left:0px;margin-top:0px;	font-family:Verdana;}

#principal{	font-size:12px;	width:800px;background-color:#ffffff;	border:solid 2px #aa0000;}


	#cabecera{width:800px;height:100px;background-color:#00BFFF;color:#FFFFFF;float:left;}
		#main{width:800px;	height:100%;border:solid 2px #220501;}
			#menu{width:800px;	height:25px;float:left;	}
					.boton{width:120px;	height:25px;float:left;	background-color:#000000;color:#ffffff;	}
				  .url_boton{text-decoration:none;	color:#ffffff;	   }
				  #buscador{width:200px;height:25px;float:left;	text-align:center;  }
				  
				  
			#contenidosecun{width:800px;float:left;	}
					#contenedor{width:600px;	float:left;}
					
						#separador{width:600px; height:20px;float:left;}
						
						#post{width:600px;float:left;text-align:center;		}
							#titulo_post{width:600px;	height:20px;float:left;	}
								#titulo{width:400px;height:20px;float:left;text-align:left;font-weight:bold;}
								#fecha{width:200px;height:20px;float:left;text-align:right;}
							#texto_post{width:600px;float:left;text-align:left;}
							#separador_debajo_post{width:600px;height:10px;float:left;	}
							#debajo_post{width:600px;height:20px;float:left;}
								#leer_mas{width:400px;height:20px;float:left;text-align:left;}
								#comentarios{width:200px;height:20px;float:left;text-align:right;}
								#div_entre_post{width:600px;height:3px;float:left;background-color:#000000;	}
								
								#div_paginacion_post{margin-top:5px;height:30px;	width:600px;float:left;text-align:center;font-size:12px;}
													
					/*********************estilos para noticias.php*******************************/								
					#div_post_top		{width:600px; height:25px;	float:left;}
					
						#div_post_contenedor	{width:600px;float:left;}
							#div_post_titulo	{width:600px;float:left;text-align:left;}
								#div_post_titulo_texto	{width:400px;float:left; height:20px;text-align:left;font-weight:bold;								font-size:14px;font-family:Verdana;}
								#div_post_titulo_fecha	{width:200px;float:left; height:20px;text-align:right;	text-decoration:underline;	}
							#div_separador_titulo	{width:600px;float:left; height:3px; background-color:#009966;}		
							#div_post_contenedor_detalle	{width:600px;border:solid 2px #aa0000;	float:left;	}		
								.div_separador_detalle_post{width:25px;float:left;	}
								#div_detalle_post	{width:550px;border:solid 3px #eeA3D9;margin-left:25px;	float:left; }		
									#contenedor_descarga_categoria_post	{width:550px;float:left;height:20px;}	
										    #div_categoria_post	{width:275px;height:20px;text-align:left;float:left;}														
											 #div_descarga_post	{width:275px;height:20px;text-align:right;float:left;color:#BFFFBF;	font-size:11px;}	
									#div_form_comentarios	{width:550px;text-align:left;float:left;}
										#div_textarea_msg_1	{width:100px;vertical-align:top;float:left;}
									#div_comentarios_post	{width:550px;border:solid 3px #bbbb00;text-align:left;	float:left;}
																								
																		
					/*********************fin de estilos para noticias.php*******************************/						
								
					#sidebar{width:200px;float:left;}
						#separador_widget{width:200px; height:20px;float:left;}
						#widget{width:200px;float:left;margin-left:15px;}
								.separador_lateral_widget{width:15px;float:left;}
								#caja_widget{width:170px;float:left;}
								#titulo_widget{width:170px; height:20px;float:left;background-color:#333333;color:#ffffff;text-align:center;}
								#contenido_widget{width:170px;float:left;height:20px;background-color:#f0f0f0;text-align:center;	}
					#footer_separador{width:800px;	height:15px;	color:#000000;float:left;
								
										}							
					#footer{width:800px;height:15px;background-color:#ffffff;color:#000000;font-size:10px;border:solid 2px #00A3D9;
							float:left;}