Creating an Org Chart with CSS

The trick is to use LOTS of divs. Every box and every line is its own div... and the whole thing is in another div.

Another thing they wanted was some of the boxes to expand to show more details. This was really easy to do with javascript and I used jQuery for the animations

So here's my divs:

<div id="container">
<div id="box1">
 <h3 class="titles">Box 1</h3>
</div>
<div id="line1"></div>
<div id="box2">
 <h2 class="titles">Box 2</h2>
</div>
<div id="line2"></div>
<div id="box3">
<h3 class="titles">Box 3</h3>
</div>
<div class="clear"></div>
<div id="line3"></div>
<div id="box4">
<h2 class="titles"><a class="show" href="#">Expandable</a></h2>
<div id="expand">
 I am the contents of an expandable box
</div>
<p class="clear"></p>
</div>

<div id="box5">
 <h2 class="titles">Box 5 has a longer sentence</h2>
</div>
<div id="line4"></div>
<div id="box6">
 <strong>Box 6</strong>
</div>
<div id="line5"></div>
<div id="line6"></div>
<div class="clear"></div>
<div id="line7"></div>
<div id="line8"></div>
<div id="line9"></div>
<div class="clear"></div>
<div id="box7"><strong>Box 7</strong></div>
<div id="box8"><strong>Box 8</strong></div>
<div id="box9"><strong>Box 9</strong></div>
</div>

You'll notice box 4 is expandable. Script below the css.

The css:

* { padding:0; margin:0; }
body { font-family: Arial,Helvetica,sans-serif; font-size: 80%; color: #000;}
h1{ font-size: 133%;}
h2 { font-size: 116%;}
h3{ font-size: 108%;}
h4 { font-size: 104%;}

#expand{ display:none; text-align:center; }
#container{
width:950px;
text-align:center;
margin:auto;
margin-top: 10px;
}
.clear { clear:both;}
.titles { text-align:center; padding:10px; }
#box1,#box2,#box3{
display:inline;
border: 1px solid #000;
float:left;
height:55px;
width:250px;
}
#line1,#line2{
font-size:0;
display:inline;
width: 96px;
height:1px;
float:left;
margin-top:23px;
background-color:#000;
}
#line3,#line5{
font-size:0;
width:1px;
height:35px;
background-color:#000;
margin:auto;
}
#box4 {
border: 1px solid #000;
width:200px;
height:55px;
margin:auto;
margin-bottom:10px;
text-align:left
}
#box5{
border:1px solid #000;
width:760px;
height:30px;
margin:auto;
}
#line4{
font-size:0;
height:20px;
width:1px;
background-color:#000;
margin:auto;
}
#box6{
border:1px solid #000;
width:300px;
height:75px;
margin:auto;
background-color:#FF0;
}
#line6{
font-size:0;
height:1px;
width:599px;
background-color:#000;
margin:auto;
}
#line7{
font-size:0;
height:20px;
width:1px;
background-color:#000;
margin-left: 175px;
display:inline;
float:left;
}
#line8,#line9{
font-size:0;
height:20px;
width:1px;
background-color:#000;
margin-left: 298px;
display:inline;
float:left
}
#box7{
border:1px solid #000;
width:200px;
height:40px;
margin-left:100px;
display:inline;
float:left;
padding-top:15px;
}
#box8{
border:1px solid #000;
width:150px;
height:40px;
margin-left:100px;
display:inline;
float:left;
padding-top:15px;
}
#box9{
border:1px solid #000;
width:150px;
height:40px;
margin-left:130px;
display:inline;
float:left;
padding-top:15px;
}

And finally the JS:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
// expandable
 $("a.show").toggle(function(){
  $("#box4").animate({width: '940px', height: '225px'});
  $("#expand").slideDown('medium');
 },function(){
  $("#box4").animate({width: '200px', height: '55px'});
  $("#expand").slideUp('medium');
 });
});
</script>

jQuery was great for this because of their toggle function so I could use the same link to expand and contract the box.

Now all I need to do is make a way to automate the whole thing!