title: Horizontal div tree
body: <p>I want to generate a horizontal tree out of nested divs using css without javascript. The child elements should be in the same depth. Therefore, i created a nested div structure with float left and clear elements. But the child elements aren't in the same depth:</p>
  
  <p><strong>Please see my JSFiddle:</strong> <a href="https://jsfiddle.net/bpb680L9/" rel="nofollow">https://jsfiddle.net/bpb680L9/</a></p>
  
  <p>Is it possible, to position the child element relative to the left side of the parent, not to the text element within the parent? Or to adjust the high of the text to the parent, so that the following child elements are adjusted to the end of the text element? Or is there any other elegant solution to build a horizontal tree with variable number of child elements and siblings only with css and html?</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>div.layout {
      border: 1px solid black;
      display: inline-block;
      position: relative;
      left: 50px;
  }
  div.clear {
      clear: both;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div&gt;
      content
      &lt;div class="layout"&gt;
          content
          &lt;div class="layout"&gt;
              content
          &lt;/div&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;
          &lt;div class="layout"&gt;
              content
          &lt;/div&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;div class="layout"&gt;
          content
          &lt;div class="layout"&gt;
              content
              &lt;div class="layout"&gt;
                  content
                      &lt;div class="layout"&gt;
                          content
                      &lt;/div&gt;
                      &lt;div class="clear"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="clear"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="clear"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Any help would be greatly appreciated!</p>