title: Organization Chart Using HTML & CSS
body: <p>Hi I'm thinking whether it is possible to generate an organization chart as shown in the below image using HTML &amp; CSS</p>
  
  <p><a href="https://i.stack.imgur.com/1avZO.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1avZO.jpg" alt="enter image description here"></a></p>
  
  <p>I have created an organization chart like in this <a href="http://jsfiddle.net/itay1989/4tgCu/5" rel="nofollow noreferrer">http://jsfiddle.net/itay1989/4tgCu/5</a>.</p>
  
  <pre><code>    &lt;div class="tree"&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;President Director &lt;br/&gt;Tetsuo Nakai&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;
                              HR &amp;amp; Administration&lt;br/&gt;
                              Heli Neo&lt;br/&gt;Manager&lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li&gt;
                                  &lt;a href="#"&gt;IT Administrator &lt;br/&gt;Ericson Ginting&lt;br/&gt;Assistant Manager&lt;/a&gt;
  
                                  &lt;ul&gt;
                                      &lt;li&gt;
                                          &lt;a href="#"&gt;IT Engineer &lt;br/&gt;I Wayan Purushottama&lt;br/&gt;Engineer&lt;/a&gt;
  
                                          &lt;ul&gt;
                                          &lt;li&gt;
                                              &lt;a href="#"&gt;IT Support&lt;br/&gt;Juanda F Butar Butar&lt;br/&gt;Assistant Engineer&lt;/a&gt;
                                          &lt;/li&gt;
                                          &lt;/ul&gt;
                                      &lt;/li&gt;
  
                                      &lt;li&gt;
                                          &lt;a href="#" class="just-line"&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;/a&gt;
                                      &lt;ul&gt;
                                      &lt;li&gt;
                                          &lt;a href="#"&gt;IT Support&lt;br/&gt;David Alwis&lt;br/&gt;Assistant Engineer&lt;/a&gt;
  
                                          &lt;ul&gt;
                                          &lt;li&gt;
                                              &lt;a href="#"&gt;IT Support&lt;br/&gt;Nico Simanjuntak&lt;br/&gt;Technician&lt;/a&gt;
                                          &lt;/li&gt;
                                          &lt;/ul&gt;
                                      &lt;/li&gt;
                                      &lt;/ul&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
  
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
  
  
          /*Now the CSS*/
      * {margin: 0; padding: 0;}
  
      .tree
      {
          width: auto;
  
          margin-left: auto;
          margin-right: auto;
      }
  
      .tree ul {
          padding-top: 20px; position: relative;
  
          transition: all 0.5s;
          -webkit-transition: all 0.5s;
          -moz-transition: all 0.5s;
      }
  
      .tree li {
          float: left; text-align: center;
          list-style-type: none;
          position: relative;
          padding: 20px 5px 0 5px;
  
          transition: all 0.5s;
          -webkit-transition: all 0.5s;
          -moz-transition: all 0.5s;
      }
  
      /*We will use ::before and ::after to draw the connectors*/
  
      .tree li::before, .tree li::after{
          content: '';
          position: absolute; top: 0; right: 50%;
          border-top: 1px solid #ccc;
          width: 50%; height: 20px;
      }
      .tree li:after{
          right: auto; left: 50%;
          border-left: 1px solid #ccc;
      }
  
      /*We need to remove left-right connectors from elements without 
      any siblings*/
      .tree li:only-child::after, .tree li:only-child::before {
          display: none;
      }
  
      /*Remove space from the top of single children*/
      .tree li:only-child{ padding-top: 0;}
  
      /*Remove left connector from first child and 
      right connector from last child*/
  .tree li:first-child::before, .tree li:last-child::after{
      border: 0 none;
  }
  /*Adding back the vertical connector to the last nodes*/
  .tree li:last-child::before{
      border-right: 1px solid #ccc;
      border-radius: 0 5px 0 0;
      -webkit-border-radius: 0 5px 0 0;
      -moz-border-radius: 0 5px 0 0;
  }
  .tree li:first-child::after{
      border-radius: 5px 0 0 0;
      -webkit-border-radius: 5px 0 0 0;
      -moz-border-radius: 5px 0 0 0;
  }
  
  /*Time to add downward connectors from parents*/
  .tree ul ul::before{
      content: '';
      position: absolute; top: 0; left: 50%;
      border-left: 1px solid #ccc;
      width: 0; height: 20px;
      margin-left: -1px;
  }
  
  .tree li a{
      border: 1px solid #ccc;
      padding: 5px 10px;
      text-decoration: none;
      color: #666;
      font-family: arial, verdana, tahoma;
      font-size: 11px;
      display: inline-block;
  
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
  
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
  }
  
  /*Time for some hover effects*/
  /*We will apply the hover effect the the lineage of the element also*/
  .tree li a:hover, .tree li a:hover+ul li a {
      background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
  }
  /*Connector styles on hover*/
  .tree li a:hover+ul li::after, 
  .tree li a:hover+ul li::before, 
  .tree li a:hover+ul::before, 
  .tree li a:hover+ul ul::before{
      border-color:  #94a0b4;
  }
  
  li a.just-line {
      display: none;
  }
  a.just-line + ul {
      padding-top: 74px;
  }
  a.just-line + ul:before {
      height: 74px;
  }
  </code></pre>
  
  <p>But its spreading horizontally and breaking up the chart and spreading to multiple pages</p>
  
  <p>My organization is asking that the whole chart should fit into a single page and it should occupy the whole page.</p>
  
  <p>Kindly need help in generating the chart as shown in figure using HTML &amp; CSS as i'm getting data dynamically.</p>