Text below image in grid made with divs - html

Question

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:
<div id="grid">
<div id="gridtop1">
<img src="img/img.jpeg" />
<p>Text here</p>
</div>
<div id="gridtop2">
<img src="img/img.jpeg" />
<p>Text here</p>
</div>
<div id="gridtop3">
<img src="img/img.jpeg" />
<p>Text here</p>
</div>
<div id="gridbottom1">
<img src="img/img.jpeg" />
<p>Text here</p>
</div>
<div id="gridbottom2">
<img src="img/img.jpeg" />
<p>Text here</p>
</div>
<div id="gridbottom3">
<img src="img/img.jpeg" />
<p>Text here</p>
</div>
</div>
And CSS:
#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%;
}
Now i tried this:
#grid p {
text-align: justify;
width: [width of img];
}
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.

Answer 1

I dont think you have to sweat so much on the CSS.
Please check this fiddle out and let me know if that solves your problem -
You can implement it by simple CSS (using float and position)
**Fiddle

Answer 2

You can use HTML5 tags as <figure> and <figcaption> (instead of div & p )and display <figure> as inline-boxes.
DEMO (see image caption set below or hover at bottom of image)
<figure>
<img src="http://dummyimage.com/120x150&text=img-2" />
<figcaption>
<p>Caption image</p>
</figcaption>
</figure>
Basic CSS :
figure {
margin:2px;
display:inline-block;
vertical-align:top;
}
to center them, use text-align:center on figure parent container. to have them on the right or left, use text-align:rightorleft;.
text in figcaption , will use width of image as reference given for the width of figure.
if you set figcaption in absolute position, you do not have to mind their width.