Tiene 2 columnas, utilizan la propiedad float.
He podido comprobar que en algunos navegadores firefox, la columna de la izquiera (contenido), a veces se desplaza hacia abajo, sin embargo, cuando refrescas, vuelve a subir.
He pensado que puede ser un bug de firefox.
Copio y pego el código (he tenido que quitar algunas url porque no me deja subirla por tener menos de 30 mensajes).
Cita:
<html lang="es"><!-- InstanceBegin template="/Templates/general02.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Description" content="Tienda de productos Herbalife para mantenerte sano y en forma" >
<meta name="Keywords" content="Nutrición, Herbalife, productos, sanos, cuerpo, deporte, físico, atletas, dieta, comida, sana, nutrirse, tienda, online" >
<meta name="Robots" content="all" >
<title>Nutriéndose</title>
<link href="/prueba2/css/generico.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
<div id="cabecera">
<div id="cabizq"> </div>
<div id="cabdrc"> </div>
<div id="titulo">
<div style="width:95%; margin:auto; padding-top:10px;">
<h1>Nutriéndose.com</h1>
Un estilo de vida saludable
</div>
</div>
<div id="login">
<br/>
<form action="perfil.php" method="post" name="acceder">
<label for="user">Usuario:</label><br/>
<input type="text" name="usuario" value="user" id="user" maxlength="10"><br/>
<label for="pass">Contraseña:</label><br/>
<input type="password" name="password" value="pass" id="pass" maxlength="10"><br/><br/>
<input type="submit" name="enviar" value="Entrar">
</form>
</div>
</div>
<div id="bloque">
<div id="menulatdrc">
<h2>Menú Principal</h2>
<ul class="navi">
<li><a href="index.php">Inicio</a></li>
<li><a href="quienes.php">Quienes sómos</a></li>
<li><a href="comocomprar.php">Como comprar</a></li>
<li><a href="crearcuenta.php">Registro</a></li>
<li><a href="contacto.php">Contactar</a></li>
</ul>
<h2>Productos</h2>
<ul class="navi">
<li><a href="productos.php?cat=4">Control de peso</a></li>
<li><a href="productos.php?cat=1">Nutrición</a></li>
<li><a href="productos.php?cat=3">Nutrición para deportistas</a></li>
<li><a href="productos.php?cat=2">Cuidado de la piel</a></li>
<li><a href="productos.php?cat=5">Cuidado del cabello</a></li>
<li><a href="productos.php?cat=6">Fragancias</a></li>
</ul>
<h2>Más Información</h2>
<ul class="navi">
<li><a href="noticias.php">Noticias</a></li>
<li><a href="documentos.php">Artículos</a></li>
<li><a href="enlaces.php">Enlaces de interés</a></li>
<li><a href="calendario.php">Calendario</a></li>
<li><a href="faq.php">Preguntas y respuestas</a></li>
</ul>
<br/>
</div>
<div id="contenido">
<!-- InstanceBeginEditable name="contenido" -->
<div id="seccion"><h2>Productos</h2></div>
<br>
<!-- InstanceEndEditable -->
</div>
</div>
<div id="pie">Copyright © 2006 Nutriendose.com</div>
</body>
<!-- InstanceEnd --></html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Description" content="Tienda de productos Herbalife para mantenerte sano y en forma" >
<meta name="Keywords" content="Nutrición, Herbalife, productos, sanos, cuerpo, deporte, físico, atletas, dieta, comida, sana, nutrirse, tienda, online" >
<meta name="Robots" content="all" >
<title>Nutriéndose</title>
<link href="/prueba2/css/generico.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
<div id="cabecera">
<div id="cabizq"> </div>
<div id="cabdrc"> </div>
<div id="titulo">
<div style="width:95%; margin:auto; padding-top:10px;">
<h1>Nutriéndose.com</h1>
Un estilo de vida saludable
</div>
</div>
<div id="login">
<br/>
<form action="perfil.php" method="post" name="acceder">
<label for="user">Usuario:</label><br/>
<input type="text" name="usuario" value="user" id="user" maxlength="10"><br/>
<label for="pass">Contraseña:</label><br/>
<input type="password" name="password" value="pass" id="pass" maxlength="10"><br/><br/>
<input type="submit" name="enviar" value="Entrar">
</form>
</div>
</div>
<div id="bloque">
<div id="menulatdrc">
<h2>Menú Principal</h2>
<ul class="navi">
<li><a href="index.php">Inicio</a></li>
<li><a href="quienes.php">Quienes sómos</a></li>
<li><a href="comocomprar.php">Como comprar</a></li>
<li><a href="crearcuenta.php">Registro</a></li>
<li><a href="contacto.php">Contactar</a></li>
</ul>
<h2>Productos</h2>
<ul class="navi">
<li><a href="productos.php?cat=4">Control de peso</a></li>
<li><a href="productos.php?cat=1">Nutrición</a></li>
<li><a href="productos.php?cat=3">Nutrición para deportistas</a></li>
<li><a href="productos.php?cat=2">Cuidado de la piel</a></li>
<li><a href="productos.php?cat=5">Cuidado del cabello</a></li>
<li><a href="productos.php?cat=6">Fragancias</a></li>
</ul>
<h2>Más Información</h2>
<ul class="navi">
<li><a href="noticias.php">Noticias</a></li>
<li><a href="documentos.php">Artículos</a></li>
<li><a href="enlaces.php">Enlaces de interés</a></li>
<li><a href="calendario.php">Calendario</a></li>
<li><a href="faq.php">Preguntas y respuestas</a></li>
</ul>
<br/>
</div>
<div id="contenido">
<!-- InstanceBeginEditable name="contenido" -->
<div id="seccion"><h2>Productos</h2></div>
<br>
<!-- InstanceEndEditable -->
</div>
</div>
<div id="pie">Copyright © 2006 Nutriendose.com</div>
</body>
<!-- InstanceEnd --></html>
Cita:
/* CSS Document */
body {
margin:0px;
margin-top:5px;
font: 11px arial;
color:#666;
background:#426E48;
}
h1 { padding:0; margin:0; color: #FFF; background: inherit;font: bold 34px Arial; letter-spacing: -1px; }
h2 { background-color: inherit; color:#FF8D00; font-size:15px; font-weight:bold; margin: 0px 0 10px 0; padding:0; }
h2 a { color: #FF8D00; }
h2 a:hover { color: #EE8300; text-decoration: none;}
h3 { background-color: inherit; color:#666; font-size:11px; font-weight:bold; }
h3 a { color: #666; text-decoration:none; }
h3 a:hover { color: #666; text-decoration: none;}
input, select { border:1px solid #ccc; font: 11px arial; color:#666; }
hr { border:0px; border-top:1px dashed #ccc;}
a { color: #666; text-decoration:none; }
a:hover { text-decoration:underline; }
fieldset { border:1px solid #ccc; padding:5px; }
img { border:0px; }
iframe { width:100%; height:750px; border:0px; }
form { padding:0px; margin:0px; }
/* capas */
#cabecera {
width:760px;
margin:auto;
background:#2EAC50;
}
#cabizq {
width:580px;
height:20px;
background:#1C7935;
float:left;
}
#cabdrc {
width:180px;
height:20px;
background:#2EAC50;
float:right;
}
#titulo {
background:#2EAC50 url(../img/header.jpg);
width:580px;
height:120px;
float:left;
font-size: 16px;
color:#fff;
}
#login {
width:160px;
height:120px;
padding-left:10px;
padding-right:10px;
float:right;
background:#B3E6BB;
}
#bloque {
width:760px;
margin:auto;
background: #fff url(../img/fondo.gif);
clear:both;
display:table;
}
#menulatdrc {
float:right;
width:160px;
margin-top:10px;
padding-left:15px;
padding-right:5px;
}
.navi {
list-style:none;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:15px;
padding:0px;
}
.navi li {
margin:0px;
padding:2px;
border-bottom:1px dashed #ccc;
}
.navi li:hover {
background:#C6EFC8;
}
.navi a {
color:#003366;
text-decoration:none;
}
.navi a:hover { text-decoration:none; }
#contenido {
float:left;
width:560px;
padding:10px;
text-align:justify;
}
#seccion { border-bottom:1px dashed #ccc;}
.not { width:100%; padding-bottom:10px; border-bottom:1px solid #ccc; }
#noticias {float:left; width:49%; padding-bottom:10px; padding-top:20px;}
#noticias ul { list-style-image:url(../img/arrow.gif); margin:0px; padding:0px; }
#noticias li { margin:0px; padding:0px; margin-left:17px;}
#articulos {float:right; width:49%; padding-bottom:10px; padding-top:20px;}
#articulos ul { list-style-image:url(../img/arrow.gif); margin:0px; padding:0px; }
#articulos li { margin:0px; padding:0px; margin-left:17px;}
#pie {
width:760px;
height:20px;
margin:auto;
clear:both;
background:#2EAC50;
text-align:center;
color:#fff;
}
/* Otros */
.colum1 {
width:49%;
float:left;
height:192px;
border-bottom:1px solid #ccc;
padding-top:5px;
}
.colum2 {
width:49%;
float:right;
margin-top:-14px;
height:192px;
border-bottom:1px solid #ccc;
padding-top:5px;
}
.boton, .boton:hover {
border:1px solid #ccc;
background:#f7f7f7;
padding-left:3px;
padding-right:3px;
text-decoration:none;
}
body {
margin:0px;
margin-top:5px;
font: 11px arial;
color:#666;
background:#426E48;
}
h1 { padding:0; margin:0; color: #FFF; background: inherit;font: bold 34px Arial; letter-spacing: -1px; }
h2 { background-color: inherit; color:#FF8D00; font-size:15px; font-weight:bold; margin: 0px 0 10px 0; padding:0; }
h2 a { color: #FF8D00; }
h2 a:hover { color: #EE8300; text-decoration: none;}
h3 { background-color: inherit; color:#666; font-size:11px; font-weight:bold; }
h3 a { color: #666; text-decoration:none; }
h3 a:hover { color: #666; text-decoration: none;}
input, select { border:1px solid #ccc; font: 11px arial; color:#666; }
hr { border:0px; border-top:1px dashed #ccc;}
a { color: #666; text-decoration:none; }
a:hover { text-decoration:underline; }
fieldset { border:1px solid #ccc; padding:5px; }
img { border:0px; }
iframe { width:100%; height:750px; border:0px; }
form { padding:0px; margin:0px; }
/* capas */
#cabecera {
width:760px;
margin:auto;
background:#2EAC50;
}
#cabizq {
width:580px;
height:20px;
background:#1C7935;
float:left;
}
#cabdrc {
width:180px;
height:20px;
background:#2EAC50;
float:right;
}
#titulo {
background:#2EAC50 url(../img/header.jpg);
width:580px;
height:120px;
float:left;
font-size: 16px;
color:#fff;
}
#login {
width:160px;
height:120px;
padding-left:10px;
padding-right:10px;
float:right;
background:#B3E6BB;
}
#bloque {
width:760px;
margin:auto;
background: #fff url(../img/fondo.gif);
clear:both;
display:table;
}
#menulatdrc {
float:right;
width:160px;
margin-top:10px;
padding-left:15px;
padding-right:5px;
}
.navi {
list-style:none;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:15px;
padding:0px;
}
.navi li {
margin:0px;
padding:2px;
border-bottom:1px dashed #ccc;
}
.navi li:hover {
background:#C6EFC8;
}
.navi a {
color:#003366;
text-decoration:none;
}
.navi a:hover { text-decoration:none; }
#contenido {
float:left;
width:560px;
padding:10px;
text-align:justify;
}
#seccion { border-bottom:1px dashed #ccc;}
.not { width:100%; padding-bottom:10px; border-bottom:1px solid #ccc; }
#noticias {float:left; width:49%; padding-bottom:10px; padding-top:20px;}
#noticias ul { list-style-image:url(../img/arrow.gif); margin:0px; padding:0px; }
#noticias li { margin:0px; padding:0px; margin-left:17px;}
#articulos {float:right; width:49%; padding-bottom:10px; padding-top:20px;}
#articulos ul { list-style-image:url(../img/arrow.gif); margin:0px; padding:0px; }
#articulos li { margin:0px; padding:0px; margin-left:17px;}
#pie {
width:760px;
height:20px;
margin:auto;
clear:both;
background:#2EAC50;
text-align:center;
color:#fff;
}
/* Otros */
.colum1 {
width:49%;
float:left;
height:192px;
border-bottom:1px solid #ccc;
padding-top:5px;
}
.colum2 {
width:49%;
float:right;
margin-top:-14px;
height:192px;
border-bottom:1px solid #ccc;
padding-top:5px;
}
.boton, .boton:hover {
border:1px solid #ccc;
background:#f7f7f7;
padding-left:3px;
padding-right:3px;
text-decoration:none;
}
