Texto en dos columnas como un diario o periódico en post. Tipos

Escribir un texto en dos columnas como si se tratara de un artículo de un diario cualquiera es muy fácil si aplicas un código en la zona de redactar entradas (Edición de HTML).

Este truco se puede catalogar como uno de los que se aplican a los textos y son de utilidad cuando armamos un post.
En ocasiones, si nos da la real gana, puede servir para que un texto no se haga demasiado largo o para darle un aire periodístico a la entrada. Cualquier opción que ronde por la imaginación es válida.


Lo más habitual es:

Escritorio - Nueva entrada - Edición de HTML y copiar el códido

Después en Redactar, das rienda suelta a tu imaginación y escribe lo que desees.



Por experiencia propia sé que cuando te enfrentas a un código, sea el que sea, te "pones mal@". Lo mejor es pasar de todo y dejarse llevar. Si sale mal....., otro día saldrá muuuuuucho mejor. Algunas veces cuestión de "prueba y error".

• Opción A:

Realizamos lo más simple.


<div style="float:left; width: 45%">texto-columna-izquierda</div><div style="float:right; width: 45%">texto-columna-derecha</div><div style="clear: both"></div>


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat

• Opción B:

Supongamos que queremos que las dos columnas salgan con unas características que a nosotros nos lo haga más atractivo, es decir que el texto salga justificado.
Si es así basta con añadir esta preferencia a las órdenes primarias anteriores dentro de la orden style :


<div style="float: left; width: 45%; text-align: justify;">Texto de la columna (lado izquierdo)</div><div style="float: right; width: 45%; text-align: justify;">Texto de la columna (lado derecho)</div><div style="clear: both"></div>


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat

• Opción C:

También puedes colocar una imagen en lugar de la primera letra o directamente la imagen que te dé la santa gana. Para ello basta con añadir una orden al lado de <div style="float: left; width: 45%; text-align: justify;"> la línea:


<img style="margin: 0px; float: left;" src="URL de la imagen" alt="imagen o letra" border="0" />


Es decir, quedando:


<div style="float: left; width: 45%; text-align: justify;"><img style="margin: 0px; float: left;" src="URL de la imagen" alt="imagen" border="0" />Texto de la columna (lado izquierdo)</div><div style="float: right; width: 45%; text-align: justify;">Texto de la columna (lado derecho)</div><div style="clear: both"></div>


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat

Nota:

También resulta con:


<table><td style="width:40%;margin-top:0px;padding:15px;"><p style="text-align:justify;">AQUI EL TEXTO DE LA PRIMERA<br />COLUMNA DEL POST</p> <td style="width:40%;margin-top:0px;padding:15px;"><p style="text-align:justify;">AQUI EL TEXTO DE LA SEGUNDA COLUMNA DEL POST</p> </table>

Más apuntes en Trucos de Texto