2 Columnas de texto

De vez en cuando queremos ver elegante nuestro texto en dos columnas y hasta con imagenes. Y de verdad, se miran elegantes para los que tienen un blog de historia, poemas o cuentos y para los que no también.


2 columnas de texto alineado a la izquierda:

<div style="float: left; width: 45%; text-align: left;">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="float: right; width: 45%; text-align: left;">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="clear: both"></div>

2 columnas de texto alineado a la derecha:

<div style="float: left; width: 45%; text-align: right;">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="float: right; width: 45%; text-align: right;">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="clear: both"></div>

2 columnas de texto alineado al centro:

<div style="float: left; width: 45%; text-align: center;">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="float: right; width: 45%; text-align: center;">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="clear: both"></div>

2 columnas de texto justificado:

<div style="float: left; width: 45%; border: 0px solid #00529B; text-align: justify;">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="float: right; width: 45%; text-align: justify;">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="clear: both"></div>

---

Ahora 2 columnas de texto justificado pero con imagenes a la izquierda incluyendole la propiedad float:

<div style="float: left; width: 45%; text-align: justify;">
<img style="float: left;" src="Url-de-tu-imagen" alt="imagen" />
1.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="float: right; width: 45%; text-align: justify;">
<img style="float: left;" src="Url-de-tu-imagen" alt="imagen" />
2.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="clear: both"></div>

Ahora 2 columnas de texto justificado pero con imagenes hacia a la derecha:

<div style="float: left; width: 45%; text-align: justify;">
<img style="float: right;" src="Url-de-tu-imagen" alt="imagen" />
1.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="float: right; width: 45%; text-align: justify;">
<img style="float: right;" src="Url-de-tu-imagen" alt="imagen" />
2.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="clear: both"></div>

---

También le puedes colocar a las 2 columnas un color de fondo:

<div style="background-color: #770000; float: left; width: 45%; text-align: justify;">
<img style="float: left;" src="Url-de-tu-imagen" alt="imagen" />
1.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="background-color: #770000; float: right; width: 45%; text-align: justify;">
<img style="float: left;" src="Url-de-tu-imagen" alt="imagen" />
2.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="clear: both"></div>

O también que te parece, una imagen:

<div style="background-image: url(Url-de-tu-imagen); float: left; width: 45%; text-align: justify;">
<img style="float: left;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWs5zQ93py-0dfvSRh7DdN8U0MIAQKJ5DLq4I41dtLfUpx0kghHigTb0qBgHsFFNqXJ8f9MZl4049IKWz2RFmeoc_zq9lqN41_Mar62zgPDXxboG3n-GNbtm5Iy1DOlaF6YvnB3-6-83IP/s80/Carretera+rodeando+a+la+tierra.jpg" alt="imagen" />
1.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="background-image: url(Url-de-tu-imagen); float: right; width: 45%; text-align: justify;">
<img style="float: left;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWs5zQ93py-0dfvSRh7DdN8U0MIAQKJ5DLq4I41dtLfUpx0kghHigTb0qBgHsFFNqXJ8f9MZl4049IKWz2RFmeoc_zq9lqN41_Mar62zgPDXxboG3n-GNbtm5Iy1DOlaF6YvnB3-6-83IP/s80/Carretera+rodeando+a+la+tierra.jpg" alt="imagen" />
2.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="clear: both"></div>

---

Al ultimo si prefieres, le podras poner un color de texto, tamaño, asi como tipo de letra y un borde ya sea en las columnas o a las imagenes:

<div style="background-image: url(Url-de-tu-imagen); float: left; color: #CCCCCC; border: 2px solid #006699; font-family:Broadway; font-size: 14pt; width: 45%; text-align: justify;">
<img style="float: left; border: 2px solid #006699" src="Url-de-tu-imagen" alt="imagen" />
1.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="background-image: url(Url-de-tu-imagen); float: right; color: #CCCCCC; border: 2px solid #006699; font-family:Broadway; font-size: 14pt; width: 45%; text-align: justify;">
<img style="float: left; border: 2px solid #006699" src="Url-de-tu-imagen" alt="imagen" />
2.-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</div><div style="clear: both"></div>

Espero y te ayude en algo.