title: CSS Organization Chart
body: <p>I found a basic organization chart online and I adapted some of my own to include an avatar bubble. I have two problems I can't figure out right now. Any help would be very appreciated.</p>
  
  <p>Here is my code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
  }
  
  .tree {
    text-align: center;
    padding-left: 10px;
  }
  
  .tree ul {
    padding-top: 15px;
    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: 15px 0px 0px 60px;
    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: 15px;
  }
  
  .tree li::after {
    right: auto;
    left: 50%;
    border-left: 1px solid #ccc;
  }
  
  
  /*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*/
  
  ul.first li.first::before,
  ul.first li.first::after {
    border: 0 none;
  }
  
  .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: 15px;
  }
  
  .tree li .box {
    border: 1px solid #ccc;
    padding: 5px 10px 5px 0px;
    text-decoration: none;
    color: #666;
    font-family: arial, verdana, tahoma;
    font-size: 12px;
    display: inline-block;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
  }
  
  
  /*Hover effects*/
  
  .tree li .box:hover,
  .tree li .box:hover+ul li .box {
    background: #c8e4f8;
    color: #000;
    border: 1px solid #94a0b4;
  }
  
  
  /*Connector styles on hover*/
  
  .tree li .box:hover+ul li::after,
  .tree li .box:hover+ul li::before,
  .tree li .box:hover+ul::before,
  .tree li .box:hover+ul ul::before,
  .avatar {
    border-color: #94a0b4;
  }
  
  
  /*Avatar bubbles*/
  
  .avatar {
    position: relative;
    top: 0px;
    left: -35px;
    width: 75px;
    height: 75px;
    margin-right: -30px;
    background-size: cover;
    background-color: #fff;
    background-image: url("temp.jpg");
    float: left;
    border: .5px solid #94a0b4;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="tree"&gt;
    &lt;ul class="first"&gt;
      &lt;li class="first techops"&gt;&lt;span class="box"&gt;&lt;div class="avatar"&gt;&lt;/div&gt;Department Area Name&lt;br&gt;&lt;strong&gt;Director&lt;/strong&gt;&lt;br&gt;&lt;br&gt;John Smith&lt;/span&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;span class="box"&gt;&lt;div class="avatar"&gt;&lt;/div&gt;Manager&lt;br/&gt;Jane Smith&lt;/span&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;span class="box"&gt;&lt;div class="avatar"&gt;&lt;/div&gt;Team Leader&lt;br/&gt;John Doe&lt;/span&gt;
                &lt;ul&gt;
                  &lt;li&gt;&lt;span class="box"&gt;&lt;div class="avatar"&gt;&lt;/div&gt;Next Title&lt;br/&gt;Next Name&lt;/span&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;span class="box"&gt;&lt;div class="avatar"&gt;&lt;/div&gt;Team Leader&lt;br/&gt;Jane Doe&lt;/span&gt;
  
              &lt;/li&gt;
              &lt;li&gt;&lt;span class="box"&gt;&lt;div class="avatar"&gt;&lt;/div&gt;Team Leader&lt;br/&gt;Jeff Doe&lt;/span&gt;
                &lt;li&gt;&lt;span class="box"&gt;&lt;div class="avatar"&gt;&lt;/div&gt;Team Leader&lt;/span&gt;&lt;/li&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;span class="box"&gt;&lt;div class="avatar"&gt;&lt;/div&gt;Manager 2&lt;/span&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;span class="box"&gt;&lt;div class="avatar"&gt;&lt;/div&gt;Name 3&lt;/span&gt;&lt;/li&gt;
              &lt;li&gt;&lt;span class="box"&gt;&lt;div class="avatar"&gt;&lt;/div&gt;Name 4&lt;/span&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The first issue is that the lines break down to when they don't fit on the page, so it looks weird, as you can see here the "Manager 2" should be in the same line as "Manager Jane Smith" but it's breaking down</p>
  
  <p><a href="https://i.stack.imgur.com/p9lAA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p9lAA.png" alt="enter image description here"></a></p>
  
  <p>Ideally, I would rather have it extend the right pane over as much as needed. If there 20-30 children in one line, then the overflow should be able to scroll to the right as much as needed. The problem I keep coming across is the position:relative (I think), otherwise it wouldn't line up properly.</p>
  
  <p>The second issue I can't seem to figure out is how to make the text stop word-wrapping after the <code>&lt;br/&gt;</code>. The example is in the "Next Title, Next Name" one. As you can see, it drops the "Name" right after the "Next". Ideally, I would like it to be all in one line. I'm pretty sure it's the <code>&lt;br/&gt;</code> that's causing it. If you look at the first one, the "Department Area Name" is before the <code>&lt;br/&gt;</code> and it's not doing it there.</p>
  
  <p>Again, thank you in advance for any insight you may have.</p>