Create organization chart using HTML and CSS coding

Question

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.

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>

Possible duplicate of [Creating organizational chart structure using CSS and JQuery](https://stackoverflow.com/questions/28407646/creating-organizational-chart-structure-using-css-and-jquery) — Vikasdeep Singh, Aug 30 '18 at 01:59

score 2 · Accepted Answer · answered Aug 30 '18 at 02:57

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>

Yes..thank you very much Adam... I will read through the CSS rules and let you know if I have any part that I don't understand. I try to duplicate coding from google and edit it to make it like the picture as shown above but failed hahaha.. — Wan1234, Aug 30 '18 at 03:17
Hi Adam.. I want to ask something.. Is it possible to make tooltip with the coding that you give? I try to do but only work for box at the top. I have use Jquery for tooltip. This is the coding http://jsfiddle.net/L8bho8yu/140/ — Wan1234, Sep 05 '18 at 02:13
@Wan1234 Yes, it is possible, but I would reevaluating your choice in UI components for that requirement as something else may be more suitable. A tooltip is meant to provide additional, small details. — Adam Chubbuck, Sep 05 '18 at 04:30
Oh I see..but it's okay. I finally find the way to make the tooltip. Thank you for helping me :) — Wan1234, Sep 05 '18 at 06:32

Create organization chart using HTML and CSS coding

1 Answers1