Float problema al minimizar

yokiboku · #1 (**permalink**) 18/03/2013, 09:59

Hola

Tengo un problema con la propiedad float, ya que al minimizar el tamaño de mi página la mayoría de imagenes y elementos salen fuera de su contenedor ¿por qué el fondo del contenedor no llega hasta el final de la página y se ven estos elementos fuera? ¿Qué puedo hacer?

Me pasa tanto con la caja de contenido como la de cabecera. Si alguien lo sabe que me ayude por favor.

Dejo aquí el código con la estructura de la página. Muchas gracias!

Código HTML:

 <!DOCTYPE html PUBLIC "-//W3C//DD 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=iso-8859-1" 

/>
  <title>Diseño web</title>



<style>

*{
  padding: 0px;
  Margin: 0px;
  outline: 0;
}

p { color: black; font-family: Verdana; }

body {
  Margin-top: 0px;
  Margin-right: 0px;
  Margin-bottom: 0px;
  Margin-left: 0px;
  background-color: grey;

}


/* ---------------- Aquí empieza la sección de CABECERA */

#cabecera {
  font-size: 2em;
  padding: .5em;
  Margin-top: 60px;
  height: 400px;
  width: auto;
  background-color: #E5E5E5;


}



#titulo {
  width: 1050px;
  height: 400px;
  margin-left: auto;
  margin-right: auto;


}

.imagen_cabecera {
  float: right;
  width: 428px;
  height: 153px;
  background-color: red;  

}



/* ----------------- Aquí empieza la sección de CONTENIDO */

#contenido {
  color: #808080;
  font: 12px  Verdana, Helvetica, sans-serif;
  background-color: #E5E5E5;
  width: auto;
  height: auto;
  
}

.vacio {
  width: auto;
  height: 250px;
  margin-left: auto;
  margin-right: auto;
}

.seccion {
  color: #808080;
  width: 1250px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding: .3em;
  text-align: center;
  
}

.descripcion {
  width: 300px;
  height: auto;
  position: relative;
  top: 90px;
  left: 5px;
  float: right;
  border-radius: 12px 0 0 12px;
  text-align: justify;
  padding: 4em 9em 4em 3em;
  color: white;
  background: rgba(90, 90, 90, 0.4);
  box-shadow: -2px 2px 5px #333;
  -webkit-box-shadow: -2px 2px 5px #333; /* para safari */

}


.titulo_seccion {
  width: 449px;
  height: 60px;
  margin: 3em 2em 0;
  float: left;
  background-color: red;

}


.seccion_img {
  margin: 40px 10px;
  height: 530px;
  width: 343px; 
  float: left;
  padding: .5em;
  background-color: red;


}

.separador {
  margin: 1px auto;
  clear: both;
  border-top: 1px dashed #FF00FF;
  height: 5px;
  width: 900px; 

}

.clear {
  margin: 1px auto;
  clear: both;
  width: 900px; 

}




/* -----------------------Aquí empieza la sección de PIE */

#pie {
  font-size: .7em;
  padding: .5em .9em .6em .9em;
  height: 40px;
  width: 1200px;
  margin-top: 5em;
  margin-left: auto;
  margin-right: auto;

}

p.texto1 {
  color: #58585A;
  height: 20px;
  width: 200px;
  float: left;

}


p.texto2 {
  color: #58585A;
  height: 40px;
  width: auto;
  float: right;
  text-align: right;

}


p.texto2 a {
  color: #58585A;
  text-decoration: none;

}

p.texto2 a:hover {
  color: #1A171B;

}

</style>


</head>


<body>


<div id="cabecera">

	<div id="titulo">
		<div class="imagen_cabecera"> Esta es la imagen de la 

cabecera</div>

	</div>
</div>


    <div class="vacio"></div>


<div id="contenido">

    <div class="seccion">

    <div class="titulo_seccion"> TITULO </div>

    <div class="descripcion"> Esto es un texto de prueba </div>

    <div class="clear"> </div>

    <div class="seccion_img"> IMAGEN </div>

    <div class="seccion_img"> IMAGEN </div>

    <div class="seccion_img"> IMAGEN </div>

	<div class="separador"></div>

    <div class="seccion_img">  IMAGEN  </div>

	<div class="separador"> </div>

    </div>


</div>


<div id="pie">



<p class="texto1"> Elemento de texto </p>


<p class="texto2"> Contacto: tlf +34.xxx.xxx.xxx E-mail <a 

href="mailto:[email protected]  Subject=Hola que tal"> [email protected] 

</a></p>

 
</div>

</body>

</html>