CSS org chart

How would I go about creating a basic organisation chart using css? What I want is a series of boxes with job titles in them which appear vertically and with a connecting line in the center.

Hi,

Do you mean something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.jobtitle {
 position:relative;
 width:200px;
 height:40px;
 line-height:40px;
 border:2px solid #000;
 margin-bottom:50px;
 text-align:center;
}
.connector {
 position:absolute;
 left:100px;
 bottom:-52px;
 height:50px;
 border-left:2px solid #000;
}
</style>
</head>
<body>
<div class="jobtitle"><div class="connector"></div>Job Title</div>
<div class="jobtitle"><div class="connector"></div>Job Title</div>
<div class="jobtitle"><div class="connector"></div>Job Title</div>
<div class="jobtitle"><div class="connector"></div>Job Title</div>
<div class="jobtitle">Job Title</div>
</body>
</html>

Paul

2 classes should do it, one for the boxes one for the connecting lines, however I think and extra one to take care of some IE bugs would help.

The styles


#OrgChart {
  text-align: center; //Get round IE5 centering bug
}

.job {
  margin-left: auto;
  margin-right: auto;
  border: 1px solid black;
  width: 15em;
}
.line {
  margin-left: auto;
  margin-right: auto;
  border-left: 1px solid black;
  width: 0px;
  height: 4em;
}

and the html


<div id="OrgChart">
 <div class="job">Manager</div>
 <div class="line"></div>
 <div class="job">Sub-Manager</div>
 <div class="line"></div>
 <div class="job">Supervisor</div>
 <div class="line"></div>
 <div class="job">Lowlife</div>
</div>

Hmmm…That’s a neater solution than mine :wink:

Thanks guys, exactly what I wanted :slight_smile:

Since I made this original post there’s been a further need and I wonder can I still use css.

The org charts I’m getting now have more than one child to a parent eg

             manager

assistant1 assistant2

Any ideas how I could take the solution posted above further to do this?

Hi,

I think you’d probably just end up just absolutely placing everything.

I did play around with this and then I got bored ;). Maybe you can finish it off!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.jobtitlemain {
 position:relative;
 width:100px;
 height:40px;
 line-height:40px;
 border:2px solid #000;
 margin-bottom:50px;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
}
.jobtitle {
 position:absolute;
 width:100px;
 height:40px;
 line-height:40px;
 border:2px solid #000;
 margin-bottom:50px;
 text-align:center;
}
.toplevel {
 position:relative;
 width:300px;
 height:20px;
 border:2px solid #000;
 border-bottom:none;
 margin-left:auto;
 margin-right:auto;
}
.toplevel2 {
 position:relative;
 width:150px;
 height:20px;
 border:2px solid #000;
 border-bottom:none;
 margin-left:auto;
 margin-right:auto;
}
.secondlevel {
 position:absolute;
 top:114px;
 margin-left:-150px;
}
.secondlevelright {
 position:relative;
 top:94px;
 margin-left:150px;
}
.connector {
 bottom:-52px;
 height:50px;
 border-left:2px solid #000;
}
.connectorlong {
 bottom:-72px;
 height:70px;
 border-left:2px solid #000;
}
.centre {position:absolute;left:50px;}
.left {position:absolute;left:-50px;top:20px;}
.right {position:absolute;left:250px;top:20px;}
.right2 {position:absolute;left:100px;top:20px;}
.offset {margin-top:90px;margin-left:50px;}
</style>
</head>
<body>
<div class="jobtitlemain"> 
  <div class="connector centre"></div>
  Job Title </div>
<div class="toplevel"> 
  <div class="left jobtitle"> 
	<div class="connector centre"></div>
	Job title</div>
  <div class="right jobtitle"> 
	<div class="connectorlong centre "></div>
	Job Title 
	<div class="jobtitle left offset"> 
	  <div class="connectorlong centre "></div>
	  Job Title </div>
  </div>
  <div class="secondlevel"> 
	<div class="toplevel2"> 
	  <div class="left jobtitle"> 
		<div class="connector centre"></div>
		Job title</div>
	  <div class="right2 jobtitle"> 
		<div class="connector centre"></div>
		Job Title</div>
	</div>
  </div>
</div>
</body>
</html>


I’m sure theres an easier way !

Paul

Excellent work as usual Paul, thanks m8.

I know this is an old thread, but it still gets indexed up high in searching for CSS Org charts, so I wanted to post Slickmap http://astuteo.com/slickmap/ is something to consider for this function.