Align CSS tree vertically

Question

I’m developing a project where I need to show a family tree. The closest I found was through of this topic. But it’s displaying horizontally.

How to change to show vertically?

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  min-width: 1200px;
  margin: 0;
  padding: 50px;
  color: #000;
  font: 16px Verdana, sans-serif;
  background: #fff;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#wrapper {
  position: relative;
}

.branch {
  position: relative;
  margin-left: 250px;
}
.branch:before {
  content: "";
  width: 50px;
  border-top: 2px solid #000;
  position: absolute;
  left: -100px;
  top: 50%;
  margin-top: 1px;
}

.entry {
  position: relative;
  min-height: 60px;
}
.entry:before {
  content: "";
  height: 100%;
  border-left: 2px solid #000;
  position: absolute;
  left: -50px;
}
.entry:after {
  content: "";
  width: 50px;
  border-top: 2px solid #000;
  position: absolute;
  left: -50px;
  top: 50%;
  margin-top: 1px;
}
.entry:first-child:before {
  width: 10px;
  height: 50%;
  top: 50%;
  margin-top: 2px;
  border-radius: 10px 0 0 0;
}
.entry:first-child:after {
  height: 10px;
  border-radius: 10px 0 0 0;
}
.entry:last-child:before {
  width: 10px;
  height: 50%;
  border-radius: 0 0 0 10px;
}
.entry:last-child:after {
  height: 10px;
  border-top: none;
  border-bottom: 2px solid #000;
  border-radius: 0 0 0 10px;
  margin-top: -9px;
}
.entry.sole:before {
  display: none;
}
.entry.sole:after {
  width: 50px;
  height: 0;
  margin-top: 1px;
  border-radius: 0;
}

.label {
  display: block;
  min-width: 150px;
  padding: 5px 0px;
  line-height: 20px;
  text-align: center;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -15px;
}

<div id="wrapper"><span class="label">Root</span>
  <div class="branch lv1">
    <div class="entry"><span class="label">Entry-1</span>
      <div class="branch lv2">
        <div class="entry"><span class="label">Entry-1-1</span>
          <div class="branch lv3">
            <div class="entry sole"><span class="label">Entry-1-1-1</span></div>
          </div>
        </div>
        <div class="entry"><span class="label">Entry-1-2</span>
          <div class="branch lv3">
            <div class="entry sole"><span class="label">Entry-1-2-1</span></div>
          </div>
        </div>
        <div class="entry"><span class="label">Entry-1-3</span>
          <div class="branch lv3">
            <div class="entry sole"><span class="label">Entry-1-3-1</span></div>
          </div>
        </div>
      </div>
    </div>
    <div class="entry"><span class="label">Entry-2</span></div>
    <div class="entry"><span class="label">Entry-3</span>
      <div class="branch lv2">
        <div class="entry"><span class="label">Entry-3-1</span></div>
        <div class="entry"><span class="label">Entry-3-2</span></div>
        <div class="entry"><span class="label">Entry-3-3</span>
          <div class="branch lv3">
            <div class="entry"><span class="label">Entry-3-3-1</span></div>
            <div class="entry"><span class="label">Entry-3-3-2</span>
              <div class="branch lv4">
                <div class="entry"><span class="label">Entry-3-3-2-1</span></div>
                <div class="entry"><span class="label">Entry-3-3-2-2</span></div>
              </div>
            </div>
            <div class="entry"><span class="label">Entry-3-3-3</span></div>
          </div>
        </div>
        <div class="entry"><span class="label">Entry-3-4</span></div>
      </div>
    </div>
    <div class="entry"><span class="label">Entry-4</span></div>
    <div class="entry"><span class="label">Entry-5</span></div>
  </div>
</div>

Answer 1

Your code is based on absolute positions and margins relative to the layout you have now (i.e., the class label gets the 50% from the top of her div father, the class branch has margin-left: 250px, and so on). That is, he was done to be shown from left to right. If you need to necessarily do this conversion, I see two ways to do this:

1. Make the conversion manually

   Basically, you will rotate your code by 90º. Everything that is positioned with left-hand ratio should be positioned relative to the top, and so on. It’s a kind of tiresome, repetitive, and with great chances of getting you lost. But as programmers don’t like to repeat things, you can appeal to the second option.

2. transform: rotate()

   Since you’re going to rotate everything on the arm, what’s the problem with letting CSS handle it? If you apply

   #wrapper {
       -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
       -o-transform: rotate(90deg);
       -ms-transform: rotate(90deg);
       transform: rotate(90deg);
   }
   

   You will see that you have already walked half way. The problem is that, in this case, you rotate everything you have inside #wrapper, including the text (which I assume you don’t want). To solve such a problem, simply rotate the text in -90º, or 270º.

    span {
       -webkit-transform: rotate(270deg);
       -moz-transform: rotate(270deg);
       -o-transform: rotate(270deg);
       -ms-transform: rotate(270deg);
       transform: rotate(270deg);
   }
   

   This solves almost 100% of your problem, and you can see it working here. Note that I had to add margin-top:200px; so that word root appeared. Note also that some overlaps came between the words. This is due to the rotation, and that the code was not built for this orientation. You can play with this pen now, and see how the values behave, after applying the transformation. The work to remove these overlaps shouldn’t be too big.

From here, you choose what kind of work you will do. I particularly recommend that you rewrite the code (i.e., follow option 1). Although repetitive, tiring and everything else, is well worth learning.