Problem with text in two columns

[Juan Palomo]

Hello everyone!!!

I am trying to make a tiddler with two columns of text to put lyrics and their translation to the side. I have tried it in several ways and I can not.

-The first way I've tried is with the following code:

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

The problem I have with this form is that the text overflows the tiddler and looks bad. What is there to add so that the text does not overflow the tiddler?

-The second way I tried with this code:

<div> <table style = "border-width: 0px;" Cellspacing = "20" cellpadding = "50" border = "0">
<Tbody> <tr valign = "top">
<Td width = "50%"> Text_A
</ Td>
<Td width = "50%"> Text_B
</ Td>

In this second case, what I do not like is to see the edges of the cells. How can they be deleted or hidden?


Thank you.

[fran....@gmail.com]

A ver ésto:

Estilo (un tiddler etiquetado con $:/tags/Stylesheet):

.contenedor {
display:table;
}
.texto, .traduc {
display:table-cell;
text-align:justify;
margin:2em;
padding:2em;
}
.texto {
font-style:italic;
}
.traduc {
border-left:solid 0.5em #00c;
}

En el tiddler:

<div class="contenedor">
  <div class="texto">
    <$transclude tiddler="Texto-1" mode="block"/>
  </div>

  <div class="traduc">
    <$transclude tiddler="Texto-2" mode="block"/>
  </div>
</div>

Espero que te sirva.

[Juan Palomo]

Thank you very much!!!

The truth is that it looks very nice. I had tried several alternatives but none of them were the same as yours. The last one was a simple transclusion on a two-column table, simple and effective, but looked at the edges of the table and I did not like the result. I am a newbie to this in HTML and CSS, the knowledge I have is almost null.

On the other hand, I wish I could avoid having to create two tiddlers, one for the original song and one for the translation and have it all in one.
But if the way I want is not possible, I like your proposal, especially the vertical bar that you have put.

Best regards.

P.S. And many thanks for the other proposal. ;-)

[Juan Palomo]

Perfect!!!

By modifying the code you sent me, I have managed to put the original song directly and translated directly into a tiddler.

<div class="contenedor">
  <div class="texto">

   Texto

  </div>

  <div class="traduc">
       Traduccion
  </div>
</div>

Greetings (Muchas, muchas gracias)