CSS-Rows

by litmind

HTML

<div>
  <div id="relations" class="relations">
    <div>Entity 1</div>        
    <div>Entity 2</div>
    <div>Entity 3</div>
  </div>
  <div id="relation1" class="entities">
    <div>Ab</div>        
    <div>98224</div>
    <div>αβγδ</div>
  </div>
  <div id="relation2" class="entities">
    <div>Cdefg</div>
    <div>511</div>
    <div>ε</div>
  </div>
  <div id="relation3" class="entities">
    <div>hijkl</div>
    <div>6431</div>
    <div>zum</div>
  </div>
  <div id="problem" class="entities">
    <div style="background-color: #666666;">- X -</div>
    <div style="background-color: #666666;">- Y -</div>
  </div>
    <br>
        <div style="max-width: 300px;"><h5>~Problem</h5>X can be either an Entity 1 or Entity 2,<br>
    and Y can be either an Entity2 or Entity 3.<br><br>
            <strong>(Unless X differs significantly from Y by looks, which they seem to do characteristically.)</strong><br><br>
            <span style="background-color: #ededed; color: #64a81b;">Good thing about this layout of the html code is that you can see the relations directly in the html-code while entering them. And will therefore have better control of the relations between the entities.</span>                    
        </div>
</div>

CSS

.entities > div { /* Needed */
    display:inline-block; /* Needed */
    /* Styling */
    border: thin solid #4d4d4d;
    padding: 5px;
    margin: 2px;
}

.relations > div {
    display:inline-block;
    margin: 2px;
}

#relations:before {
    content: "_______|";
    color: #fff;
    clear: left;
}

#relation1:before {
    content: "Relation 1";
}

#relation2:before {
    content: "Relation 2";
}

#relation3:before {
    content: "Relation 3";
}
#problem:before {
    content: "Problem";
}