title: Arrange 9 circular divs into a christmas tree shape
body: <p>Using Notepad++ and HTML I would like to arrange the divs with the text:name into a 2,3,4 triangular shape with the gold div on top. Here is my code so far, I don't know how to arrange them in this format:
      
      
          
      
      
      Family Tree
      
      </p>
  
  <pre><code>&lt;div style="position: relative;display: inline-block;height: 150px;width: 150px;
  border-radius: 100%;border: 2px solid; margin-left: 5px;margin-top: 5px;text-align: center;"&gt;
  &lt;p style="position: relative;margin-top: 50px;font-size: 25px;"&gt;name&lt;/p&gt;
  &lt;/div&gt;
  &lt;div style="position: relative;display: inline-block;height: 150px;width: 150px;
  border-radius: 100%;border: 2px solid black;margin-left: 5px;margin-top: 5px;text-align: center;"&gt;
  &lt;p style="position: relative;margin-top: 50px;font-size: 25px;"&gt;name&lt;/p&gt;
  &lt;/div&gt;
  &lt;div style="position: relative;display: inline-block;height: 150px;width: 150px;
  border-radius: 100%;border: 2px solid black;margin-left: 5px;margin-top: 5px;text-align: center;"&gt;
  &lt;p style="position: relative;margin-top: 50px;font-size: 25px;"&gt;name&lt;/p&gt;
  &lt;/div&gt;
  &lt;div style="position: relative;display: inline-block;height: 150px;width: 150px;
  border-radius: 100%;border: 2px solid black;margin-left: 5px;margin-top: 5px;text-align: center;"&gt;
  &lt;p style="position: relative;margin-top: 50px;font-size: 25px;"&gt;name&lt;/p&gt;
  &lt;/div&gt;
  &lt;div style="position: relative;display: inline-block;height: 150px;width: 150px;
  border-radius: 100%;border: 2px solid black;margin-left: 5px;margin-top: 5px;text-align: center;"&gt;
  &lt;p style="position: relative;margin-top: 50px;font-size: 25px;"&gt;name&lt;/p&gt;
  &lt;/div&gt;
  &lt;div style="position: relative;display: inline-block;height: 150px;width: 150px;
  border-radius: 100%;border: 2px solid black;margin-left: 5px;margin-top: 5px;text-align: center;"&gt;
  &lt;p style="position: relative;margin-top: 50px;font-size: 25px;"&gt;name&lt;/p&gt;
  &lt;/div&gt;
  &lt;div style="position: relative;display: inline-block;height: 150px;width: 150px;
  border-radius: 100%;border: 2px solid black;margin-left: 5px;margin-top: 5px;text-align: center;"&gt;
  &lt;p style="position: relative;margin-top: 50px;font-size: 25px;"&gt;name&lt;/p&gt;
  &lt;/div&gt;
  &lt;div style="position: relative;display: inline-block;height: 150px;width: 150px;
  border-radius: 100%;border: 2px solid black;margin-left: 450px;margin-top: 5px;text-align: center;"&gt;
  &lt;p style="position: relative;margin-top: 50px;font-size: 25px;"&gt;name&lt;/p&gt;
  &lt;/div&gt;
  &lt;div style="position: relative;display: inline-block;height: 150px;width: 150px;
  border-radius: 100%;border: 2px solid black;margin-left: 5px;margin-top: 5px;text-align: center;"&gt;
  &lt;p style="position: relative;margin-top: 50px;font-size: 25px;"&gt;name&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>