Tema: alinear imagen y texto
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 27/11/2009, 08:15
Avatar de destor77
destor77
 
Fecha de Ingreso: noviembre-2004
Ubicación: Gálvez, Santa Fe, Argentina
Mensajes: 2.654
Antigüedad: 19 años, 5 meses
Puntos: 43
alinear imagen y texto
hola:
estoy armando un boletin html y quiero que la imagen de la noticia este a la izquierda y el texto a la derecha, eso lo logre, pero el texto si es muy largo envuelve a la imagen, hay forma de evitar esto? les dejo el codigo para que lo vean:
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=iso-8859-1" />
  5. <title>Documento sin título</title>
  6. <style type="text/css">
  7.     body, html {
  8.         background: #fff;
  9.         width: 100%;
  10.         height: 100%;
  11.         margin: 0px;
  12.         padding: 0px;
  13.         font-family: Verdana, Geneva, sans-serif;
  14.         font-size: 100%;
  15.         color: #000000;
  16.     }
  17.     
  18.     .wraper {
  19.         margin: 0px auto; /* centrar con firefox */
  20.         /* centra las capas con internet explorer */
  21.         text-align: left;
  22.         background-color: #ba5209;
  23.         width: 600px;
  24.     }
  25.     
  26.     .wraper .cabecera {
  27.         background-image: url(cabecera-newsletter.jpg);
  28.         height: 162px;
  29.     }
  30.     
  31.     .wraper .cabecera .novedades {
  32.         float: left;
  33.         margin: 140px 0 0 45px;
  34.         font-size: 14px;
  35.         font-weight: bold;
  36.         color: #7b0e12;
  37.     }
  38.     
  39.     .wraper .cabecera .fecha {
  40.         float: left;
  41.         margin: 130px 0 0 250px;
  42.         font-size: 14px;
  43.         color: #7b0e12;
  44.     }
  45.     
  46.     .wraper .cabecera .anio {
  47.         float: left;
  48.         margin: 85px 0 0 10px;
  49.         font-size: 27px;
  50.         color: #7b0e12;
  51.     }
  52.     
  53.     .cuerpo {
  54.         background-color: #fff;
  55.         width: 515px;
  56.         margin-left: 39px;
  57.         margin-bottom: 30px;
  58.         padding-left: 10px;
  59.     }
  60.     
  61.     .cuerpo h2 {
  62.         font-size: 10px;
  63.         color: #7b0e12;
  64.         padding: 0 0 0 10px;
  65.     }
  66.     
  67.     .seccion {
  68.         margin: 0 0 0 0;
  69.     }
  70.     
  71.     .cuerpo hr {
  72.         width: 500px;
  73.         margin: 40px 15px 0 0;
  74.     }
  75.     
  76.     .cuerpo .imagen {
  77.         padding: 5px 0 10px 0;
  78.         width: 510px;
  79.     }
  80.     
  81.     .cuerpo .imagen p {
  82.         padding: 10px 5px 0 10px;
  83.         font-size: 10px;
  84.         text-align: justify;
  85.     }
  86.     
  87.     .cuerpo a {
  88.         color: #7b0e12;
  89.         text-decoration: underline;
  90.         font-size: 9px;
  91.     }
  92.     
  93.     .contenido {
  94.         display: table;
  95.         width: 510px;
  96.         padding: 10px;
  97.         margin-bottom: 10px;
  98.         vertical-align: text-top;
  99.     }
  100.     
  101.     .contenido .foto {
  102.         width: 100px;
  103.         margin: 0 15px 0 0;
  104.         padding-bottom: 10px;
  105.         float: left;
  106.     }
  107.     
  108.     .contenido .texto {
  109.         width: 480px;
  110.         padding: 0 0 0 15px;
  111.         font-size: 10px;
  112.         text-align: justify;
  113.     }
  114.     
  115.     .contenido .texto h2 {
  116.         margin-top: 0px;
  117.         color: #ba5209;
  118.         font-size: 12px;
  119.     }
  120.     
  121.     /*
  122.      .contenido p{
  123.      font-size:10px;
  124.      padding:0 0 35px 0;
  125.      text-align:justify;
  126.      }
  127.      */
  128.     .footer {
  129.         background-color: #edc8a4;
  130.         color: #000;
  131.         font-size: 10px;
  132.         text-align: left;
  133.         padding: 10px 15px 10px 15px;
  134.         line-height: 1.5em;
  135.     }
  136. </style>
  137.  
  138. </head>
abajo dejo el html