Image Description - html

Question

http://jsfiddle.net/3V6MM/
Please tell me how can I write common style for class="property-title" to display the property name under the image.
Please guide me.
Images are placed like below

Answer 1

Have a look at this layout. Also note that ids should be unique. You are using image-thumb multiple times.
Live demo: http://jsfiddle.net/9C72X/
HTML
<div>
<div class="image-thumb">
<img src="http://www.javeacasas.com/images/javea-property.jpg">
<p class="property-title">Land for Sale</p>
</div>
<div class="image-thumb">
<img src="http://in.all.biz/img/in/service_catalog/15784.jpeg">
<p class="property-title">Sale at Mura, Puttur</p>
</div>
</div>
CSS
.image-thumb {
display: inline-block;
vertical-align: top; /* <-- update to solve multiline text */
width: 200px;
}
.image-thumb img {
width: 100%;
}
.property-title {
text-align: center;
font-size: 10px;
}

Answer 2

Personally I don't think you need to absolutely position the caption.
You might also consider using different mark-up.
<figure class="image-thumb">
<img class="imgthumg">
<figcaption class="property-title">
image title
</figcaption>
</figure>
try this, the float left is causing your image-thumb container to collapse.
.img-thumb {
position: relative;
padding-left: 5px;
word-spacing: 10px;
float: left;
}
.imgthumb {
width:230px;
height:161px;
background:#FFF;
border:1px solid #909090;
margin-left:10px;
margin-bottom: 30px;
}
.property-title {
bottom: 0;
font-family: 'Verdana';
font-size: 8pt;
margin-left: 10px;
margin-top: 10px;
width: 236px;
position: absolute;
}

Answer 3

Replace these css classes with the below one :
#image-thumb
{
padding-left: 5px;
word-spacing: 10px;
float:left;
}
.imgthumb
{
width:230px;
height:161px;
position:relative;
background:#FFF;
border:1px solid #909090;
margin-left:10px;
}
.property-title
{
font-family: 'Verdana';
font-size: 8pt;
margin-left: 10px;
margin-top: 0;
position: relative;
width: 236px;
}
http://jsfiddle.net/abhinavpratap/3V6MM/4/