I am struggling with the CSS organization structure. The line connectors are not aligning properly with the node elements. I need assistance in positioning them correctly. JSFIDDLE
CSS styling:
* {
margin: 0;
padding: 0;
}
.tree img {
width: 75px;
}
.tree {
width: 1994px;
}
/* More CSS code here */
HTML Code:
<div id="" class="tree">
<ul>
<li>
<div class='emplist'>
<div class='deptRow'>
<h3>Research & Development</h3>
</div>
<hr>
<div class='detailsRow'>
<div class='detailsCol'>
<h3 class='empName'>Emp1</h3>
<p class='subTitle'>Research & Development
<br/>Hyderabad</p>
</div>
<div class='imgCol'><img src='' alt='abc' /></div>
</div>
<hr>
<div class='infoRow'>
<div class='infoMoreR pull-right text-right'>
<button id='btn_empModal' data-toggle='modal' class='btn btn-xs text-center'>info</button>
</div>
<div class='infoMore'>
<p id='leafCount'></p>
</div>
</div>
</div>
<ul>
<li>
<div class='emplist'>
<div class='deptRow'>
<h3>emp2</h3>
</div>
<hr>
<div class='detailsRow'>
<div class='detailsCol'>
<h3 class='empName'></h3>
<p class='subTitle'>Research & Development
<br>Hyderabad</p>
</div>
<div class='imgCol'><img src='' alt='abc' /></div>
</div>
<hr>
<div class='infoRow'>
<div class='infoMoreR pull-right text-right'>
<button id='btn_empModal' data-toggle='modal' class='btn btn-xs text-center'>info</button>
</div>
<div class='infoMore'>
<p id='leafCount'></p>
</div>
</div>
</div>
<ul>
/* Nested list items here */
</ul>
</li>
</ul>
</li>
</ul>
</div>
If you have any suggestions or improvements for the above code, please let me know as soon as possible.