title: Text below image in grid made with divs
body: <p>I made a grid with divs and there are images on it. Now i want to get the text directly below image somehow. I don't know how to do it. This is my code:</p>
  
  <pre><code>&lt;div id="grid"&gt;
       &lt;div id="gridtop1"&gt;
       &lt;img src="img/img.jpeg" /&gt;
       &lt;p&gt;Text here&lt;/p&gt;
       &lt;/div&gt;
       &lt;div id="gridtop2"&gt;
       &lt;img src="img/img.jpeg" /&gt;
       &lt;p&gt;Text here&lt;/p&gt;
       &lt;/div&gt;
       &lt;div id="gridtop3"&gt;
       &lt;img src="img/img.jpeg" /&gt;
       &lt;p&gt;Text here&lt;/p&gt;
       &lt;/div&gt;
       &lt;div id="gridbottom1"&gt;
       &lt;img src="img/img.jpeg" /&gt;
       &lt;p&gt;Text here&lt;/p&gt;
       &lt;/div&gt;
       &lt;div id="gridbottom2"&gt;
       &lt;img src="img/img.jpeg" /&gt;
       &lt;p&gt;Text here&lt;/p&gt;
       &lt;/div&gt;
       &lt;div id="gridbottom3"&gt;
       &lt;img src="img/img.jpeg" /&gt;
       &lt;p&gt;Text here&lt;/p&gt;
       &lt;/div&gt;   
  &lt;/div&gt;
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code>#grid   {
          position: relative;
          left: 10%;
          width: 80%;
          height: 600;
          background-color: yellow;
  }
  #gridtop1 {
            position: absolute;
            left: 10%;
            top: 5%;
  }
  #gridtop2 {
            position: absolute;
            left: 40%;
            top: 5%;
  }
  #gridtop3 {
            position: absolute;
            right: 10%;
            top: 5%;
  }
  #gridbottom1 {
               position: absolute;
               top: 55%;
               left: 10%;
  }
  #gridbottom2 {
               position: absolute;
               top: 55%;
               left: 40%;
  }
  #gridbottom3 {
               position: absolute;
               top: 55%;
               right: 10%;
  }
  </code></pre>
  
  <p>Now i tried this:</p>
  
  <pre><code>#grid p {
      text-align: justify;
      width: [width of img];
  }
  </code></pre>
  
  <p>But it didn't help.
  I don't want to make different id for all the p tags. I'm pretty close to giving up and using tables for this. But would be nice to get this to work. The text is below the image but it starts in the middle and goes all the way to the next image. Please someone help i spent like 3 hours trying to solve it.</p>