merge three cells in table - or using div

Question

I need generating labels for plants, and I want the plant code in the lower left corner, and the species distribution occupy the remaining area. I am doing this using html, and css.

My design has a smaller element S on top of a larger element B, the two of them aligned at the bottom.

+-----------------------------+
|      B                      |
+--------------+              |
|      S       |              |
+--------------+--------------+

doing it aligned at the top is what you get naturally, but this is definitely not what I need...

+--------------+--------------+
|      S       |              |
+--------------+              |
|      B                      |
+-----------------------------+

I think I first must place object S, then make B occupy the space left.

I have no clue. the code I'm trying to adapt uses tables, but I think I cannot merge cells in L form, or can I? I have tried with position-absolute, but then the space reserved for object S stays where I do not want the object, and the content of S is displaced to where I want S, but no space is reserved for it there. (see https://stackoverflow.com/a/33058256/78912 below)

I am adding the whole code, which I think is rather overkill, but here it comes.

.label {
    border: 1px solid black;
    padding: 2px;
    margin: 1px;
    width: 78mm;
    height: 45mm;
    float: left;
    /*page-break-inside: avoid;*/
    page-break-before: auto;
    page-break-after: auto;
    orphans: 100;
    widows: 100;
    overflow: hidden;
    box-sizing: border-box;
  }
.family {
    /* border: 1px solid red; */
    text-align: center;
    font: normal bold 14pt Arial, sans;
    margin-top: 3mm;
    height: 1.2em;
    width: 100%;
  }
.name {
    /* border: 1px solid red; */
    text-align: center;
    margin-top: 1mm;
    font: normal normal 14pt Arial, sans;
    height: 18mm;
    width: 100%;
    vertical-align: middle;
}
.species {
    /* border: 1px solid blue; */
    text-align: center;
    font: normal normal 14pt Arial, sans;
    width: 100%;
    margin-bottom: .5em;
  }
.vernacular {
    /* border: 1px solid green; */
    text-align: center;
    font: normal bold 14pt Arial, sans;
    width: 100%;
    margin-bottom: .5em;
  }

.code {
    /* border: 1px solid orange; */
    font: normal normal 12pt serif;    
    vertical-align: bottom;
    text-align: left;
    white-space: nowrap;
  }
.distribution {
    /* border: 1px solid blue; */
    font: normal normal 11pt serif; 
    vertical-align: bottom;
    text-align: right;
    float: right;
  }

.code2 {
    /* border: 1px solid orange; */
    font: normal normal 12pt serif;    
    text-align: left;
    float: left;
    white-space: nowrap;
    margin: 0 9pt 0 0;
    float: left;
  }

  <table class="label">
    <tbody><tr>
      <td colspan="2" class="family">Myrtaceae</td>
    </tr>
    <tr>
      <td colspan="2" class="name">
 <div class="species">
   <i>Eugenia</i> <i>uniflora</i>
 </div>
 <div class="vernacular">
   
 </div>
      </td>
    </tr>
    <tr>
      <td colspan="2">
<div>
<div class="distribution">Northern South America, Northern Argentina, Panamá, Costa Rica, Francia</div>
<div class="code2"><div>0G 1968GR01496.1</div></div>
</div>
      </td>
    </tr>
  </tbody>
</table>

more compactly, just the bottom S and B elements, where I do not manage to have the bottom baseline of the two aligned, nor to convince B occupy at least a bit of space at the same level as S.

.label {
border: 1px solid black;
padding: 2px;
margin: 1px;
width: 78mm;
height: 45mm;
float: left;
/*page-break-inside: avoid;*/
page-break-before: auto;
page-break-after: auto;
orphans: 100;
widows: 100;
overflow: hidden;
  }
.distribution {
/* border: 1px solid blue; */
font: normal normal 11pt serif; 
vertical-align: bottom;
text-align: right;
float: right;
  }

.code2 {
/* border: 1px solid orange; */
font: normal normal 12pt serif;    
text-align: left;
float: left;
white-space: nowrap;
margin: 4pt 9pt 0 0;
display:inline-block;
vertical-align:bottom;
  }

  <div class="label">
<p>above we have family, species, vernacular name...</p>
<div class="distribution">Northern South America, Northern Argentina, Panamá, Costa Rica, Costa Rica, Costa Rica, Costa Rica, Costa <div class="code2">0G 1968GR01496.1</div>Rica</div>
</div>

Does it have to be in `` form? Does the 'program' generate the HTML, or simply the data itself (can you show the data) which you then form into a `
`? Because, as you note, merging cells in an L shape is not possible. Is JavaScript - or one of its libraries - an option at all? — David Thomas, Oct 10 '15 at 20:27
I don't need ``, whatever works is acceptable. [the program](http://github.com/Bauble/bauble.classic) generates the html using [this mako script](https://github.com/Bauble/bauble.classic/blob/master/bauble/plugins/report/mako/labels_small.html). and the first longish snippet comes verbatim from the generated code. Javascript sounds a bit like cannon on fly, but what is your idea? — mariotomo, Oct 10 '15 at 20:32

score 1 · Accepted Answer · edited May 23 '17 at 11:44

1

This might do it for you

#parent {
  width: 350px;
  height: 150px;
  overflow: hidden;
  background-color: #ddd;
}

#parent:before {
  content: '';
  height: 65%;
  float: left;
}

#pusher {
  width: 160px;
  height: 35%;
  float: left;
  clear: left;
  background-color: #aaa;
}

<div id="parent">
  
  <div id="pusher">0G 1968GR01496.1</div>
  
  <div>
      <div class="species">
          <i>Eugenia</i> <i>uniflora</i>      
      </div>
      <div class="distribution">
        Northern South America, Northern Argentina, Panamá, Costa Rica,
        Northern South America, Northern Argentina, Panamá, Costa Rica,
        Northern South America, Northern Argentina, Panamá, Costa Rica,
        Northern South America, Northern Argentina, Panamá, Costa Rica,
        Northern South America, Northern Argentina, Panamá, Costa Rica,
      </div>
  </div>
</div>

Src: Can you float a div in the lower right of its parent div and have text wrap around it?

Furter reading using the new CSS Shapes (bad browser support though) http://www.html5rocks.com/en/tutorials/shapes/getting-started/

Additional note:

Using a canvas element and calculate/draw text might be another option, where you can put stuff exactly where you want.

Further reading here:
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text

edited May 23 '17 at 11:44

Community

1
1

answered Oct 10 '15 at 21:01

Asons

84,923
12
110
165

this comes very close to what I need. now I need make sure the text in `B` gets distributed starting at the bottom-left and not at the top-right. – mariotomo Oct 11 '15 at 01:29
As none of my text start at top-right, I got a bit confused here. ... so, to avoid misunderstandings, could you please make an image, with arrows, and show where these 2 texts should start and flow? – Asons Oct 11 '15 at 08:11
sorry, my usual left-right confusion, my fault. text is now typeset starting at the top-left, and I want to see how it would be if typeset starting from the bottom-right. – mariotomo Oct 11 '15 at 09:46
Been trying to solve bottom-right using css only, but with no luck. With a script it becomes a different story, as you can calc the text height and set a margin or padding. Also, when using script, create a canvas element and then calc texts and draw might be even easier. Did that with labels long time ago, with a windows app though, but with the same concept of calc/draw to position texts etc. – Asons Oct 11 '15 at 12:14
in this case though the text-height-calculating-script has quite a task, if it has to take into account the `pusher` area not available to the text. I think I will accept aligning top-right. – mariotomo Oct 11 '15 at 13:03

score 0 · Answer 2 · answered Oct 10 '15 at 19:46

This isn't a perfect answer because the s box does not take up space, so elements within b will have to be carefully styled as not to go underneath it, but maybe it could provide some inspiration:

#hello1 {
    background-color:grey;
    height:100px;
    width: 100px;
    position: relative;
}

#hello2 {
    background-color:white;
    position: absolute;
    display: block;
    height:50px;
    width:50px;
    bottom: 0px;
    left: 0px;
}

<div id="hello1">
    hello what is going on my freind 123 go take a helicopter.
    <div id="hello2">
        hello2
    </div>
</div>

labels are automatically produced by a program, so any logic has to be expressed in python or html/css. I agree on the "carefully styled", and I wonder how to do this other than manually. — mariotomo, Oct 10 '15 at 19:52

merge three cells in table - or using div

2 Answers2