CSS-Columns

by litmind

HTML

<div>
      <div id="relation" class="entities">
        <div>Relation 1</div>
        <div>Relation 2</div>
        <div>Relation 3</div>
        <div>Relation 4</div>
      </div>
      <div id="entity1" class="entities">
        <div>Ab</div>
        <div>Cdefg</div>
        <div>Extra</div>
      </div>
      <div id="entity2" class="entities">
        <div>98224</div>
        <div>511</div>
        <div style="background-color: #666666;">- X -</div>
      </div>
      <div id="entity3" class="entities">
        <div>αβγδ</div>
        <div>ε</div>
        <div>αδ</div>
        <div>γ</div>
      </div>
    <div style ="clear:left; max-width: 300px;"><br><h3>Problem</h3>If we want to add X to Relation 4 we will need to create blank entities to get it down there. Which means we will need to keep track of which row the relation is taking place on a whole new meta-level.<br><br>
        <strong>(Adding X to a Entity wont be that convinient if there's a big dataset.)</strong>
            </div>
    </div>

CSS

.entities {
        float:left; /* This is needed */
    }

    #relation > div {
        clear:left;
        padding: 5px;
        margin: 3px;
        float:left;
    }
    #entity1 > div,
    #entity2 > div,
    #entity3 > div { 
        clear:left; /* This is needed */
        border: thin solid #4d4d4d;
        padding: 5px;
        margin: 2px;
        float:left;
    }

    #relation:before {
        content: "________";
        color: #fff;
        float:left;
    }

    #entity1:before {
        content: "Entity 1";
        float:left;
    }
    
    #entity2:before {
        content: "Entity 2";
        float:left;
    }

    #entity3:before {
        content: "Entity 3";
        float:left;
    }