Flow chart layout

by Codesleuth

HTML

<div id="canvas">
    <div class="flow-container">
        <div class="flow-block">IN</div>
    </div>
    <div class="flow-container">
        <div class="flow-block">A</div>
        <div class="flow-or flow-or-two">
            <div class="flow-container">
                <div class="flow-block">B</div>
                <div class="flow-or flow-or-two">
                    <div class="flow-container">
                        <div class="flow-block">C</div>
                        <div class="flow-block">D</div>
                        <div class="flow-block">E</div>
                    </div>
                    <div class="flow-container">
                        <div class="flow-block">F</div>
                    </div>
                </div>
            </div>
            <div class="flow-container">
                <div class="flow-block">G</div>
            </div>
        </div>
        <div class="flow-block">H</div>
    </div>
    <div class="flow-container">
        <div class="flow-block">OUT</div>
    </div>
</div>

CSS

div.flow-container,
div.flow-or
{
    display: inline-block;
    width: 100%;
    min-height: 64px;
    /*border: 1px dashed blue;*/
    background-color: #EEE;
    
    /*margin-top: 10px;
    margin-bottom: 10px;*/
}




div.flow-or.flow-or-two>div.flow-or,
div.flow-or.flow-or-two>div.flow-container,
div.flow-or.flow-or-two>div.flow-or
{
    float: left;
    width: 50%;
    background-color: #DDD;
}

div.flow-or.flow-or-three>div.flow-or,
div.flow-or.flow-or-three>div.flow-container,
div.flow-or.flow-or-three>div.flow-container
{
    float: left;
    width: 33.3%;
    background-color: #DDD;
}

div.flow-or.flow-or-four>div.flow-or,
div.flow-or.flow-or-four>div.flow-container,
div.flow-or.flow-or-four>div.flow-container
{
    float: left;
    width: 25%;
    background-color: #DDD;
}

div.flow-or.flow-or-five>div.flow-or,
div.flow-or.flow-or-five>div.flow-container,
div.flow-or.flow-or-five>div.flow-container
{
    float: left;
    width: 20%;
    background-color: #DDD;
}

div.flow-or.flow-or-six>div.flow-or,
div.flow-or.flow-or-six>div.flow-container,
div.flow-or.flow-or-six>div.flow-container
{
    float: left;
    width: 16.6%;
    background-color: #DDD;
}

div.flow-or.flow-or-seven>div.flow-or,
div.flow-or.flow-or-seven>div.flow-container,
div.flow-or.flow-or-seven>div.flow-container
{
    float: left;
    width: 14.28%;
    background-color: #DDD;
}




div.flow-container div.flow-container div.flow-container
{
    background-color: #CCC;
}

div.flow-container div.flow-container div.flow-container div.flow-container
{
    background-color: #BBB;
}

div.flow-container div.flow-container div.flow-container div.flow-container div.flow-container
{
    background-color: #AAA;
}

div.flow-filter,
div.flow-block
{
    margin-top: 8px;
    margin-bottom: 8px;
    margin-left: auto;
    margin-right: auto;
    width: 48px;
    height: 48px;
    border: 1px solid black;
    background-color: #fff;
    text-align: center;
}

div.flow-block
{
    border-color: black;
}