htmlcssorganizational-chart

Create organization chart using HTML and CSS coding

I am new here and I want to ask for help for generating this organization chart as shown in the below image using HTML & CSS. I try it for a few days now but I still cannot make the organization chart as shown in the below image.

enter image description here

This is my coding. It is my first to try doing organization chart using coding. I still cannot find the solution.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">

<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    .jobtitlemain {
        position:relative;
        width:200px;
        height:100px;
        line-height:40px;
        border:2px solid #000;
        margin-bottom:50px;
        text-align:center;
        margin-left:auto;
        margin-right:auto;
    }
    .jobtitle {
        position:absolute;
        width:100px;
        height:40px;
        line-height:40px;
        border:2px solid #000;
        margin-bottom:50px;
        text-align:center;
    }
    .toplevel {
        position:relative;
        width:550px;
        height:150px;
        border:2px solid #000;
        border-bottom:none;
        margin-left:auto;
        margin-right:auto;
    }
    .toplevel2 {
        position:relative;
        width:150px;
        height:0px;
        border:2px solid #000;
        border-bottom:none;
        margin-left:70px;
        margin-right:auto;
        margin-top:-70px;
    }

    .toplevel3 {
        position:relative;
        width:150px;
        height:0px;
        border:2px solid #000;
        border-bottom:none;
        margin-left:70px;
        margin-right:auto;
        margin-top:70px;
    }

    .toplevel4 {
        position:relative;
        width:150px;
        height:0px;
        border:2px solid #000;
        border-bottom:none;
        margin-left:-70px;
        margin-right:auto;
        margin-top:-70px;
    }
    .toplevel5 {
        position:relative;
        width:150px;
        height:0px;
        border:2px solid #000;
        border-bottom:none;
        margin-left:70px;
        margin-right:auto;
        margin-top:-70px;
    }
    .secondlevel {
        position:absolute;
        top:114px;
        margin-left:-150px;
    }
    .secondlevelright {
        position:relative;
        top:94px;
        margin-left:150px;
    }
    .connector {
        bottom:-52px;
        height:50px;
        border-left:2px solid #000;
    }
    .connectorlong {
        bottom:-72px;
        height:70px;
        border-left:2px solid #000;
    }
    .centre {position:absolute;left:100px;}
    .centre1 {position:absolute;left:100px;}
    .centre2 {position:absolute;right:10px;}
    .left {position:absolute;left:50px;top:20px;}
    .right {position:absolute;left:250px;top:20px;}
    .right2 {position:absolute;left:100px;top:20px;}
    .offset {margin-top:90px;margin-left:50px;}
    </style>
    </head>
    <body>
        <div class="jobtitlemain"> 
        <div class="connector centre"></div>
        Vice President </div>
        <div class="jobtitlemain"> 
        <div class="connector centre"></div>
        Head Of Consulting Technoslogy Services </div>
        <div class="toplevel"> 
        <div class="left jobtitle"> 
            <div class="connector centre1"></div>
            Educatuon</div>
        <div class="connector centre2"></div>
            oil and gas</div>
            </div>
        </div>
    </body>
</html>

Solution

  • I believe you are looking for something like this. Read through the CSS rules and let me know if you have any questions. Some additional considerations will need to be made if you would like this to be responsive, though it should work on most devices as-is. 

    .box-row {
  text-align: center;
}

.box {
  border: 1px solid #000000;
  height: 50px;
  width: 120px;
  display: inline-block;
}

.bar {
  width: 30px;
  transform: rotate(90deg);
  margin: 10px auto 13px auto;
}

.horizontal-bar {
  display: inline-block;
  width: 35px;
  margin-bottom: 22px;
  margin-left: -5px;
  margin-right: -5px;
}

.box-group {
  display: inline-block;
  width: 48%;
}

.second {
  margin: 8px 70px;
}

.second-separator {
  width: 310px;
  margin-bottom: 45px;
}

.vertical-bar {
  width: 110px;
  margin-bottom: -30px;
  transform: rotate(90deg);
}
    <div class="box-row">
  <div>
    <div class="box">

    </div>
    <hr class="bar" />
  </div>
  <div>
    <div class="box">

    </div>
    <hr class="bar" />
  </div>

  <hr class="second-separator" />
  <div class="second">

    <!-- Group #1 -->
    <div class="box-group">
      <hr class="vertical-bar" />
      <div class="box-row">
        <div class="box">

        </div>
        <hr class="horizontal-bar" />
        <div class="box">

        </div>
      </div>
      <div class="box-row">
        <div class="box">

        </div>
        <hr class="horizontal-bar" />
        <div class="box">

        </div>
      </div>
    </div>

    <!-- Group #2 -->
    <div class="box-group">
      <hr class="vertical-bar" />
      <div class="box-row">
        <div class="box">

        </div>
        <hr class="horizontal-bar" />
        <div class="box">

        </div>
      </div>
      <div class="box-row">
        <div class="box">

        </div>
        <hr class="horizontal-bar" />
        <div class="box">

        </div>
      </div>
    </div>
  </div>
</div>

<div>

</div>

</div>