Mi pagina se deforma al cerrar el navegador y se encima la informacion
Código:
aca el indexcss
@charset "utf-8";
body, html {
/*background-image:url(../imagenes/colorado%20gris.jpg);*/
margin: 0px;
}
.Cabecera{
float:left;
width: 100%;
height: 170px;
background-image:url(../imagenes/background-fullsite-1.jpg);
}
.FormularioBuscador{
float:left;
width: 20%;
padding-top: 10px;
}
.BannerCabecera{
float: left;
width: 60%;
}
.FormularioLogeo{
float:right;
width: 20%;
padding-top: 10px;
}
.BarraLateralIzquierda{
float:left;
width: 20%;
margin: 10px 0px 10px 0px;
}
.ContenedorPrincipal{
float:left;
width: 60%;
}
.Articulo{
float:left;
padding: 30px 30px 10px 10px;
text-align:justify;
}
.Comentarios{
padding: 40px 40px 10px 10px;
word-break: break-all;
}
.BarraLateralDerecha{
float:right;
width: 20%;
}
.Chat{
float:left;
margin: 0% 5% 0% 5%;
font-size:12px;
}
.MensajesChat{
text-decoration:none;
font-size:8px;
}
.ResultadoBusquedas{
padding: 40px 40px 10px 10px;
padding-bottom: 10px;
text-align:justify;
font-size: 16px;
}
.ResultadoRecomensaciones{
margin: 10px 10px 10px 10px;
padding-bottom: 10px;
text-align:justify;
font-size: 13px;
}
.Footer{
width: 100%;
height: 170px;
}
img.shadow {
background: url(shadow-1000×1000.gif) no-repeat right bottom;
padding: 0px 10px 0px 10px;
}
a{text-decoration:none;}
a:link {
font-family: Arial;
text-decoration:none; color: #09F;
} /* Link no visitado*/
a:visited {
text-decoration:none; color:#03C
} /*Link visitado*/
a:active {
text-decoration:none; color:#936; background:#EEEEEE
} /*Link activo*/
a:hover {
text-decoration:none; color:#FFF; background: #09C
} /*Mause sobre el link*/
.fecha {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FF0000;
}
.mensaje {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif, sans-serif;
font-size: 10px ;
color: #333399;
font-weight: bold;
}
.usuario {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
font-weight: bold;
}
.button
{
border: 1px solid #DDD;
border-radius: 3px;
text-shadow: 0 1px 1px white;
-webkit-box-shadow: 0 1px 1px #fff;
-moz-box-shadow: 0 1px 1px #fff;
box-shadow: 0 1px 1px #fff;
font: bold 11px Sans-Serif;
padding: 6px 10px;
white-space: nowrap;
vertical-align: middle;
color: #666;
background: transparent;
cursor: pointer;
}
.button:hover, .button:focus
{
border-color: #999;
background: -webkit-linear-gradient(top, white, #E0E0E0);
background: -moz-linear-gradient(top, white, #E0E0E0);
background: -ms-linear-gradient(top, white, #E0E0E0);
background: -o-linear-gradient(top, white, #E0E0E0);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
}
.button:active
{
border: 1px solid #AAA;
border-bottom-color: #CCC;
border-top-color: #999;
-webkit-box-shadow: inset 0 1px 2px #aaa;
-moz-box-shadow: inset 0 1px 2px #aaa;
box-shadow: inset 0 1px 2px #aaa;
background: -webkit-linear-gradient(top, #E6E6E6, gainsboro);
background: -moz-linear-gradient(top, #E6E6E6, gainsboro);
background: -ms-linear-gradient(top, #E6E6E6, gainsboro);
background: -o-linear-gradient(top, #E6E6E6, gainsboro);
}
.button:after
{
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 4px solid #999;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
margin: 0 0 0 4px;
position: relative;
top: -1px;
}
.button:hover:after
{
border-top-color: black;
}
UL LI {
list-style-image: url(../imagenes/estrella.png);
}
.Formulario {
font-family: 'Raleway', 'Lato', Arial, sans-serif;
}
.Formulario h1 {
font-size: 12px;
padding-bottom: 5px;
}
.Formulario input[type=text],
.Formulario input[type=password] {
border: 1px solid #4e3043;
border: 1px solid rgba(78,48,67, 0.8);
background: #666;
border-radius: 2px;
box-shadow:
0 1px 0 rgba(255,255,255,0.2),
inset 0 1px 1px rgba(0,0,0,0.1);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
font-family: 'Raleway', 'Lato', Arial, sans-serif;
color: #FFF;
font-size: 14px;
}
.Formulario input[type=text]:hover,
.Formulario input[type=password]:hover {
border-color: #0CF;
background: #CCC;
color:#000;
}
.Formulario label {
display: none;
padding: 0 0 5px 2px;
cursor: pointer;
}
.Formulario label:hover ~ input {
border-color: #333;
}
.no-placeholder .Formulario label {
display: block;
}
.Footer{
float: left;
width: 100%;
height: 100%;
background-image:url(../imagenes/background-fullsite-1.jpg);
}
.Footer .text{
width: 16%;
margin: 5px 2% 10px 2%;
float: left;
color: #000;
font-size: 16px;
text-align: justify;
letter-spacing: 0px;
}
.Footer .text h1{
border-bottom: 1px dashed #ccc;
color:#09F
}
Código PHP:
<!DOCTYPE html>
<html lang = "es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name = "description" content = "revista web con los mejores articulos"/>
<meta name = "keywords" content = "articulos,ciencia,arte,cultura,tecnologia,eventos,morelos,cuernavaca,uaem"/>
<meta name = "author" content = "C-Mushroom" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Base WebMagazine</title>
<link rel = "shortcut icon" href="imagenes/c-mushroom.ico" type = "image/x-icon"/>
<link rel = "stylesheet" type = "text/css" href = "css/estilo.css"/>
</head>
<body>
<div class = "Cabecera">
<?php include('Header.php');?>
</div>
<div class = "BarraLateralIzquierda">
<?php include('ListaCategoria.php');?>
<?php include('Administrador.php');?>
</div>
<div class = "ContenedorPrincipal">
<?php include('Buscador.php');?>
<?php include('ListaNoticia.php');?>
</div>
<div class = "BarraLateralDerecha">
<?php include('Chat.php');?>
<?php include('Recomendaciones.php');?>
</div>
<div class = "Footer">
<?php include('Footer.php');?>
</div>
</body>
</html> 
y aca deformada
