title: Creating a spider diagram/mind map with CSS
body: <p>I'm trying to implement a "spider diagram" or "mind map" in CSS.</p>
  
  <p>Essentially, what I'd like, is a ring of boxes around a central box.</p>
  
  <p><img src="https://i.stack.imgur.com/VaKFs.png" alt="Spider diagram"></p>
  
  <p>Ideally, these would all just be DIVs that I could add more/less content to as I saw fit (and, hopefully, manipulate using JS). They don't need to be draggable or anything like that.</p>
  
  <p>Unlike the diagram, they don't need to have the grey lines etc. from the outer topics to the name of the mind map - I'm really not bothered about that.</p>
  
  <p>Firstly, I really don't know where to start. I guess I'd have to use absolute positioning for each box? That probably wouldn't be too bad if my audience were using the same resolution and browser but that won't always be the case.</p>
  
  <p>So, my real question is, how do I set up DIVs like these that will stay in the same place on different resolutions and in different browsers? Can I use absolute positioning within a relatively-aligned DIV or something?</p>
  
  <p>The browsers I need to support primarily are IE10, Chrome and Safari. So I guess I should be designing for IE10 as a base?</p>
  
  <p>Thanks in advance,</p>