Problema, Espacio en blanco parte inferior.

cesarms89 · #1 (**permalink**) 02/11/2010, 23:28

Hola a todos, mi problema es el siguiente:
estoy haciendo una pagina web con varias etiquetas div, el problema es que despues de las etiquetas que tengo me sale un espacio gigante vacio, este es el codigo de mi pagina:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My web</title>
<style type="text/css">
body{
	background:#000;
	color:#FFF;
}
#contenedor{
	margin:0 auto 0 auto;
	border:#FFF solid;
	width:990px;
	height:auto;
	z-index:1;
}
#links{
	position:relative;
	border:#FFF solid;
	width:15%;
	height:1000px;
	left: 4px;
	top: 6px;
	z-index:2;
}
#flog{
	margin: 0 auto 0 auto;
	position:relative;
	border:#FFF solid;
	width:65%;
	left: 0px;
	top: -2000px;
	z-index:3;
}
#amigos{
	position:relative;
	border:#FFF solid;
	width:15%;
	height:1000px;
	left: 84%;
	top: -1000px;
	z-index:4;
}
#header{
	border:#FFF solid;
	margin:0 auto 0 auto;
	position:relative;
	top:2px;
	height:30px;
	width:98%;
}
</style>
</head>

<body>
<div id="contenedor">
  <div id="header">

  </div>
  <div id="links">
    
  </div>
  <div id="amigos">
    
  </div>
  <div id="flog">
    <p>Contenido de la Base de Datos</p>
  </div>
</div>
</body>
</html>

y el problema es que no devo de darles tamaño fijo a contenedor, ni a flog, ya que el contenido de la etiqueta flog y contenedor cambia segun el registro de una base de datos.
Espero su ayuda.

Abrahamsas · #2 (**permalink**) 03/11/2010, 00:56

Buenas!!

Lo unico que tenes que modificar es el height del contenedor, ponerle un valor de 1050px.
Y como sugerencia, tambien podrias probar con la propiedad float. Aca te dejo un ejemplo.

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>Mi Web</title>
	<style type="text/css">
		#contenedor{
			width:960px;
			min-height:1000px;
			height:auto !important;
			margin:auto;
		}
		#header{
			background:#1C4C7D;
			width:960px;
			height:100px;
			margin:auto;
		}
		#links, #amigos{
			background:#dfdfdf;
			width:200px;
			height:900px;
		}
		#amigos{float:right;}
		#links{float:left;}
		.flog{
			background:#f8f8f8;
			width:530px;
			height:auto;
			margin:5px auto;
			padding:10px;
			color:#000;
			border:1px solid #e0e0e0;
		}
	</style>
</head>
<body>
	<div id="contenedor">
		<div id="header"></div>
		<div id="links"></div>
		<div id="amigos"></div>
		<div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
		<div class="flog">Pellentesque neque neque, egestas ut pellentesque id, convallis in nisl. Praesent egestas ipsum ut turpis bibendum eget mollis metus tristique. In lacus est, porta vitae feugiat quis, semper sit amet nisl. Suspendisse mattis mauris non sapien iaculis quis mollis turpis aliquet. Suspendisse potenti. Fusce ultrices, mauris vel bibendum pulvinar, enim urna consectetur ante, sed dictum risus justo ut lorem. Mauris commodo arcu at erat dictum in vehicula mauris hendrerit. Sed orci magna, molestie ut vestibulum a, adipiscing et enim. Duis posuere felis in magna scelerisque tempor. Ut porttitor adipiscing eleifend. Sed vulputate ante sed tellus posuere quis pharetra erat tempus.</div>
		<div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
		<div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
		<div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
		<div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
		<div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
		<div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
		<div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
		<div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
		<div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
		<div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
		<div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
		<div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
		<div class="flog">Pellentesque neque neque, egestas ut pellentesque id, convallis in nisl. Praesent egestas ipsum ut turpis bibendum eget mollis metus tristique. In lacus est, porta vitae feugiat quis, semper sit amet nisl. Suspendisse mattis mauris non sapien iaculis quis mollis turpis aliquet. Suspendisse potenti. Fusce ultrices, mauris vel bibendum pulvinar, enim urna consectetur ante, sed dictum risus justo ut lorem. Mauris commodo arcu at erat dictum in vehicula mauris hendrerit. Sed orci magna, molestie ut vestibulum a, adipiscing et enim. Duis posuere felis in magna scelerisque tempor. Ut porttitor adipiscing eleifend. Sed vulputate ante sed tellus posuere quis pharetra erat tempus.</div>	
		</div>
</body>
</html>

cesarms89 · #3 (**permalink**) 03/11/2010, 19:56

Gracias amigo, se ve genial.