View Single Post
Old 02-18-2014, 01:04 PM   #27
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,834
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
I think I had success As I said before, I used a three columns layout but not by using tables! I just used the property "float: left" and it worked also in ADE!

In the css stylesheet, I wrote:

Code:
body {
   margin: 0;
   padding: 0;
}

.left_col {
   float: left;
   width: 33%;
   text-align: center;
   background: yellow; /* This is not necessary */
   border-top: 3px solid;
}

.double_col {
   float: left;
   width: 67%;
   text-align: center;
}

.col1 {
   float: left;
   width: 50%;
   background: aqua;  /* This is not necessary */
   margin-top: -0.5em;
   font-size: 1.4em;
   font-weight: bold;
}

.col2 {
   float: left;
   width: 50%;
   background: #ddd;  /* This is not necessary */
   border-top: 3px solid;
}

.cleared {
   clear: both;
   text-indent: 1.2em;
   text-align: justify;
}
In the .html code I wrote:

Code:
<h2></h2>
<div>
  <div class="left_col">&nbsp;</div>
    <div class="double_col">
      <div class="col1">MMXIV</div>
      <div class="col2">&nbsp;</div>
    </div>
</div>

<p class="cleared">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc...
</p>
The background colors I used are not necessary; they are there only for clarity. And also we can only use:

Code:
<div class="left_col"></div>
instead of:

Code:
<div class="left_col">&nbsp;</div>
The character &nbsp; is only necessary to show the background colors. And of course, we are free to change the width of the columns.

This is the way it looks in ADE:

Click image for larger version

Name:	Three Cols.png
Views:	174
Size:	80.8 KB
ID:	119244

Below I attach the respective .epub.

Regards
Rubén
Attached Files
File Type: epub Line Through III.epub (2.7 KB, 169 views)

Last edited by RbnJrg; 02-18-2014 at 02:49 PM.
RbnJrg is offline   Reply With Quote