Ver Mensaje Individual
  #5 (permalink)  
Antiguo 07/01/2010, 15:35
Avatar de jomaruro
jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 9 meses
Puntos: 361
Respuesta: alinear texto a un lado de la imagen con div

Hola:

Prueba este código:

Código CSS:
Ver original
  1. .contenedor {
  2.     width: 100%;
  3.     text-align:justify;
  4.     padding:15px;
  5. }
  6.  
  7. .imagen {
  8.     width: 105px;
  9.     height: 135px;
  10.     margin-right:20px;
  11.     margin-left:20px;
  12.     float:right;
  13. }

Código HTML:
Ver original
  1. <div class="contenedor">
  2.             <div class="imagen">
  3.                 <img src="tuimagen.jpg" alt="imagen"/>
  4.             </div>                                                        
  5.             <p>
  6.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis vehicula pharetra. Fusce viverra lectus quis diam accumsan imperdiet. Donec sagittis posuere lorem et dapibus. Integer pharetra massa et ante auctor malesuada et nec diam. Vivamus pretium, massa tincidunt commodo lobortis, ante lorem interdum nisl, nec viverra diam risus ut justo. Nunc mattis, lacus at molestie cursus, risus tellus tincidunt ipsum, ut consequat elit dui sit amet felis. Proin eu neque nec erat lobortis elementum at non sem. Sed in dolor ac lacus mattis consequat at ut enim. Ut sollicitudin nisi vitae ligula lacinia semper. Praesent dui odio, faucibus nec eleifend eu, dictum eget dolor. Fusce eget mauris at dolor viverra dignissim. Sed non tincidunt nulla. Nulla facilisi. Vestibulum quis volutpat neque. Ut risus velit, convallis vitae sagittis vel, molestie eu quam.
  7.                 <br />
  8.                 <br />
  9.                 Donec molestie pharetra rhoncus. Sed lorem arcu, blandit et viverra vel, adipiscing ac ipsum. Proin et massa mauris. Nullam sit amet ligula turpis. Mauris metus nisl, ullamcorper sed pellentesque ac, mattis ut tortor. Vivamus fermentum metus ac nisl dignissim id lobortis leo porttitor. Sed consequat ligula sit amet justo ultrices et viverra nibh eleifend. Sed vitae massa felis, vel elementum dolor. Proin eleifend, neque nec consequat consequat, libero neque lobortis quam, ut tincidunt tellus ligula vitae nulla. Donec sed nibh dolor. Aliquam sollicitudin feugiat fermentum. Donec rutrum lobortis egestas. Integer tincidunt tristique metus, non ornare arcu posuere vitae. Donec eget risus eu erat vulputate facilisis. Donec vel enim mi. Nullam ultricies semper elit ut auctor.
  10.                 <br />
  11.                 <br />
  12.                 Aliquam sollicitudin luctus velit, vitae pharetra velit dignissim in. Phasellus eu felis ante. Nam fermentum purus felis. Nam nisl nisi, lacinia quis elementum ut, venenatis nec nulla. Sed vitae justo vel dolor dictum pulvinar. Sed egestas, mi a faucibus faucibus, urna dolor laoreet lectus, sit amet molestie tellus est tempus mi. Ut sed tellus tellus, id tempus nisl. Sed vitae nisl at lacus dignissim ultricies at nec nisi. Nullam luctus aliquet erat non euismod. Cras feugiat, tellus at vehicula luctus, dui diam dapibus eros, at sollicitudin lacus justo venenatis leo. Nulla condimentum sem ac dui vestibulum sodales. Praesent scelerisque erat a purus mattis vitae lacinia ligula luctus. Fusce a lobortis arcu. Integer eros velit, vehicula quis facilisis sit amet, hendrerit sed nisl. Nullam eget nisl eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin consequat arcu ut leo commodo ornare.            </p>
  13.         </div>

Eso si, adaptando las dimensiones que yo le he puesto a la imagen.

Saludos.


Última edición por jomaruro; 08/01/2010 a las 13:28 Razón: Corregir float del código