title: Creating organizational chart structure using CSS and JQuery
body: <p>I was checking on stack forum 
  <a href="https://stackoverflow.com/questions/11167628/trees-in-twitter-bootstrap">Trees in Twitter Bootstrap</a>, It was really interesting to see what you can achieve through CSS. Since the example mentioned in the link is of vertical flow, Is it possible to acheive same as horizontal flow.
  For e.g. <img src="https://i.stack.imgur.com/WBBdN.png" alt="enter image description here"> </p>
  
  <p>For reference I added the JS Fiddle link:
  <a href="http://jsfiddle.net/Fh47n/" rel="nofollow noreferrer">http://jsfiddle.net/Fh47n/</a></p>
  
  <pre><code>&lt;div class="tree"&gt;
  &lt;ul&gt;
      &lt;li&gt;    &lt;a href="#"&gt;Parent&lt;/a&gt;
  
          &lt;ul&gt;
              &lt;li&gt;    &lt;a href="#"&gt;Child&lt;/a&gt;
  
                  &lt;ul&gt;
                      &lt;li&gt;    &lt;a href="#"&gt;Grand Child&lt;/a&gt;
  
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;    &lt;a href="#"&gt;Child&lt;/a&gt;
  
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Grand Child&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;    &lt;a href="#"&gt;Grand Child&lt;/a&gt;
  
                          &lt;ul&gt;
                              &lt;li&gt;    &lt;a href="#"&gt;Great Grand Child&lt;/a&gt;
  
                              &lt;/li&gt;
                              &lt;li&gt;    &lt;a href="#"&gt;Great Grand Child&lt;/a&gt;
  
                              &lt;/li&gt;
                              &lt;li&gt;    &lt;a href="#"&gt;Great Grand Child&lt;/a&gt;
  
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Grand Child&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;style type="text/css"&gt;
          .tree li {
          margin: 0px 0;
          list-style-type: none;
          position: relative;
          padding: 20px 5px 0px 5px;
      }
      .tree li::before {
          content:'';
          position: absolute;
          top: 0;
          width: 1px;
          height: 100%;
          right: auto;
          left: -20px;
          border-left: 1px solid #ccc;
          bottom: 50px;
      }
      .tree li::after {
          content:'';
          position: absolute;
          top: 30px;
          width: 25px;
          height: 20px;
          right: auto;
          left: -20px;
          border-top: 1px solid #ccc;
      }
      .tree li a {
          display: inline-block;
          border: 1px solid #ccc;
          padding: 5px 10px;
          text-decoration: none;
          color: #666;
          font-family: arial, verdana, tahoma;
          font-size: 11px;
          border-radius: 5px;
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
      }
      /*Remove connectors before root*/
       .tree &gt; ul &gt; li::before, .tree &gt; ul &gt; li::after {
          border: 0;
      }
      /*Remove connectors after last child*/
       .tree li:last-child::before {
          height: 30px;
      }
      /*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;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>I know about google chart <a href="https://developers.google.com/chart/interactive/docs/gallery/orgchart?csw=1" rel="nofollow noreferrer">https://developers.google.com/chart/interactive/docs/gallery/orgchart?csw=1</a> but I dont want to use this one as my requirement is very specific which may not be feasible.</p>
  
  <p>Any guru who can help?</p>