Tema: Problemas con height de una capa
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 14/11/2012, 15:03
pollin14
 
Fecha de Ingreso: marzo-2010
Ubicación: df
Mensajes: 58
Antigüedad: 14 años, 9 meses
Puntos: 5
Respuesta: Problemas con height de una capa
Tu codigo tiene varios problemas.Uno de ellos es que estas usando la propiedad style para asígnar estilos, lo cual complica (por lo menos a mi) el analisis de tu codigo. Segunda, estas usando la propiedad position la cual te causara muchos problemas y complicaciones, y creo que para lo que quieres no es necesaria (la complicacion y los problemas ).

Este es codigo puro HTML de como deberias hacer la maquetacion y la separacion de CSS.
En este caso incluyo el codigo CSS dentro del HTML para que lo puedas visualizar rapido, pero deberia ir en un archivo aparte (estilo.css por ejemplo) del html.

Esto es lo correcto.

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title></title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.         <style>
  7.             body{
  8.                 background-color:#DADADA;
  9.             }
  10.  
  11.             .center{
  12.                 margin-right:auto;
  13.                 margin-left:auto;
  14.             }
  15.             #izquierda,#derecha{
  16.                 float:left;
  17.             }
  18.  
  19.             #encabezado{
  20.                 height:200px;
  21.                 width:520px;
  22.                 background-color:green;
  23.             }
  24.             #principal{
  25.                 width:530px;
  26.                 min-height:600px;
  27.                 padding:5px;
  28.                 background-color: yellow;
  29.             }
  30.             
  31.             #izquierda,#derecha{
  32.                 float:left;
  33.             }
  34.             #izquierda{
  35.                 width:400px;
  36.             }
  37.  
  38.             #derecha{
  39.                 width:120px;
  40. /*              height:240px;*/
  41.                 background-repeat: no-repeat;
  42.             }
  43.  
  44.             #menu_horizontal{
  45.                 height:20px;
  46.                 width:520px;
  47.                 background-color:purple;
  48.             }
  49.             ul li{
  50.                 float:left;
  51.                 list-style-image: none;
  52.                 list-style-type: none;
  53.                 margin-left:20px;
  54.             }
  55.             
  56.             #contenido{
  57.                 background-color:pink;
  58.                 min-height:200px;
  59.             }
  60.             
  61.             .lateral{
  62.                 border: black dotted thin;
  63.                 margin-top:5px;
  64.                 background-color:orange;
  65.                 display:block;
  66.             }
  67.         </style>
  68.     </head>
  69.     <body>
  70.         <div id="principal" class="center">
  71.             <div id="encabezado"></div>
  72.             <div id="menu_horizontal">
  73.                 <ul>
  74.                     <li>noticia 1</li>
  75.                     <li>noticia 2</li>
  76.                     <li>noticia 3</li>
  77.                 </ul>
  78.             </div>
  79.  
  80.             <div id="contenido">
  81.                 <div id="izquierda">
  82.                     <h1>Noticia Centro </h1>
  83.                     Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba.
  84.                     Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba.
  85.                     Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba.
  86.                     Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba.
  87.                     Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba.
  88.                     Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba.
  89.                     Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba.
  90.                 </div>
  91.                 <div id="derecha">
  92.                     <div class="lateral"><h1>noticia 1</h1>
  93.                         Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba.
  94.                         </div>
  95.                     <div class="lateral"><h1>noticia 2</h1>Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba.</div>
  96.                     <div class="lateral">noticia 3Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba.</div>
  97.                     <div class="lateral">noticia 4Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba.</div>
  98.                     <div style="clear:both"></div>
  99.                 </div>
  100.                 <div style="clear:both"></div>
  101.             </div>
  102.         </div>
  103.     </body>
  104. </html>

Un ultimo consejo, si tienes que meter imagenes por ejemplo en el encabezado o banners usa CSS.
__________________
Dead Nation