Align text under picture, in relation to picture width - html

Question

I'm using CSS to try to align 2 pictures side by side with some text underneath each picture. I'm trying to make it so that the text under the picture justifies to the width of the picture, no matter what the size of the picture. But what I get as a result is the two blocks of text overlapping. For example, I want it to look like:
**************** ***************
* Image * * Image *
* * * *
**************** ***************
Lorem ipsum dolor Lorem ipsum dolor
sit amet, sit amet,
consectetuer consectetuer
adipiscing adipiscing
elit, sed diam elit, sed diam
But I can't get the text under the image to justify, instead, they overlap. I also want it to come right before the footer (last element on the page before the footer), but the footer is overlapping some of the text as well. Here is my code:
HTML:
<div class="container">
<div class="img">
<img src="flower1small.jpg" alt="flower">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div class="image">
<img src="flower1small.jpg" alt="flower">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div>
And the CSS:
.container{
margin-top: 15%;
margin-left: 10%;
}
.img {
width:800px;
margin-left:auto;
margin-right:auto;
position: absolute;
}
.image {
width:800px;
margin-left:auto;
margin-right:auto;
position: relative;
}
div.img p{
text-align: justify;
display: block;
width:800px;
}
.bottom{
padding: 15px;
}
footer{
background: #660000;
position:absolute;
bottom:0;
width: 85%;
height:100px;
margin-right: 10%;
margin-left: 10%;
}
footer a{
color: #ffffff;
text-decoration: none;
font-size: 10px;
}
footer label{
color: #ffffff;
font-size: 10px;
}
What can I do to make it align properly? Any help would be greatly appreciated. Thanks in advance.

Answer 1

Do you mean like this: Example Fiddle ?
You would have to set a max-width for the .img elements. I used an example of a max-width of 250px and images with a width of 200px. Also you need to float them and apply a clearfix, so that the footer is positioned correctly. The footer needs to get rid of position: absolute.
That the whole .img element just uses the width of the picture for the text is not possible without javascript, so you would have to set the width via CSS.
.container{
margin-top: 15%;
margin-left: 10%;
display: block;
}
.img {
max-width:250px;
float: left;
margin: 0 5%;
}
.img img {
margin: 0 auto;
display: block;
}
.img p{
text-align: justify;
width:250px;
display: block;
}
.bottom{
padding: 15px;
}
footer{
background: #660000;
width: 85%;
height:100px;
margin-right: 10%;
margin-left: 10%;
}
footer a{
color: #ffffff;
text-decoration: none;
font-size: 10px;
}
footer label{
color: #ffffff;
font-size: 10px;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

Answer 2

Since both of these elements are within a container. You could easily set the percentage of the containers child elements to the same percentage. This way the image and the paragraph will always be the same width, no matter what your container size may be.
EX:
.image img, .image p { width: 90% }