Tema: Problema con contenedor
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 07/11/2010, 18:31
cesarms89
 
Fecha de Ingreso: julio-2010
Mensajes: 13
Antigüedad: 14 años, 6 meses
Puntos: 0
Respuesta: Problema con contenedor
Gracias a todos, Hice la pagina nuevamente siguiendo los consejos de Paramericano usando Tables y se ve muy bien, aqui les dejo el codigo.

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  5.     <title>Mi Web</title>
  6.     <style type="text/css">
  7.         #contenedor{
  8.             border:1px solid #000;
  9.             width:980px;
  10.             height:auto;
  11.             margin:auto;
  12.         }
  13.         #header{
  14.             background:#1C4C7D;
  15.             width:100%;
  16.             height:150px;
  17.             margin:auto;
  18.         }
  19.         .flog{
  20.             background:#f8f8f8;
  21.             width:94%;
  22.             height:auto;
  23.             margin:5px auto;
  24.             padding:10px;
  25.             color:#000;
  26.             border:1px solid #e0e0e0;
  27.         }
  28.         .lados{
  29.             background:#dfdfdf;
  30.             width:18%;
  31.             padding:2.1%;
  32.         }
  33.     </style>
  34. </head>
  35. <body>
  36.     <div id="contenedor">
  37.     <div id="header">
  38.     </div>
  39.     <table>
  40.       <tr>
  41.         <td class="lados" valign="top">Links
  42.         </td>
  43.         <td>
  44.           <div>
  45.             <p class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</p>
  46.             <p 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.</p>
  47.             <p class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</p>
  48.             <p class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</p>
  49.             <p class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</p>
  50.             <p class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</p>
  51.             <p class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</p>
  52.             <p class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</p>
  53.             <p class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</p>
  54.             <p class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</p>
  55.             <p 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.</p>    
  56.           </div>
  57.         </td>
  58.         <td class="lados" valign="top">Amigos
  59.         </td>
  60.       </tr>
  61.     </table>
  62.   </div>
  63. </body>
  64. </html>

Es una lastima que nadie sepa como se hace con CSS.