title: How to position many DIVs in CSS
body: <p>I have gone through a long tutorial on W3Schooles to learn CSS; I learnt some basics but still miss my primary aim: Positioning DIVs</p>
  
  <p>This is what I'm trying to do</p>
  
  <pre><code>*---------*---------*
  *         *         *
  *         *         *
  *---------*---------*
  </code></pre>
  
  <p>My goal is simple and trivial for some, but I'm having headaches doing this the <strong>right way</strong>, in fact I did it but it has lot of problems when I add more text to the DIVs or they simply merge with another DIVs</p>
  
  <p>What I did is simply play with margin and padding values using FireBug. All I need now is to learn me this simple (I hope) trick, what I'm missing is: how this simple positioning works?  Shall I use absolute, relative positioning? Change the margin, the padding, the size??</p>
  
  <p>If you have a good tutorial explaining this point, so please point it. I had other headaches looking for that on Google.</p>