Question

I ve read the other postings regarding somewhat similar issues. But this “somewhat” doesnt help.

Case:

In a table cell, I have a thumb pic. It docks itself to the top left corner without my indicating anything. Fine.
Then I want words referring to that pic. If I do nothing, they align themselves UNDERNEATH of the pic and paralell to the left side of the cell.

Theory:

I want the words aligned not underneath but to the right of the pic. No way to get that.

1. Forget about absoulute positioning because we are displaying dynamically an unknown number of rows so it would be a mess in relation to the coordinates of the page.

2. If you try to position them using the margin-left, margin-right etc, it will not work either. Reason: each town has a different length, so what is fine for one word is not fine for other word.

3. If you try relative positioning it will not work either. Reason: The rules say that relative stuff positions the dependants in relation to THE NORMAL POSITION OF THE ELEMENT. We have seen that the normal position of the element was to alight underneath the picture, so while I can position them in relation to that very first one, it turns out that the first one is positioned wrongly, therefore, all of the dependants would be too.

If I position the first element in the place I WANT by using the marging-right etc the relative positioning of the other elements will not work, because the position I WANT is not the one that the word would position itself in the document.

I have this elements:
pic
price
town
region
being the elements, other than the pic

<tr class=<?php  echo $fila?>>


<td>
<?php echo "<img src= http://localhost/housing2/assets/uploads/thumbs/$oferta->thumb_a>"?>

<ul>

<li>
<div id ="listado"><?php echo $oferta->price?></div>
</li>

<li class = "listado.town">
<div id ="listado_town" ><?php echo $oferta->nombre_localidad?></div>
</li>

<li class = "listado.region">
<div id ="listado_region"><?php echo $oferta->nombre_region?></div>
</li>

<li class = "listado.m2">
<div id ="listado_metros" ><?php echo $oferta->m2?></div>
</li>

</ul>


</td>

and the css

.listado.town{position:relative; bottom:10px;}
.listado.region{position:relative;bottom:15px;}
.listado.m2{position:relative;bottom:20px;}

but this is just one of the 20 occurrences I have tried. This one aligns all elements underneath the picture and to the left side, actually I believe it is so incorrec that the reader ignores my mistakes and then it just aligns them as they would naturally go in the document

OTHER COMBINATIONS:

Considering that the guiding tag is the Price, I let that position itself where it would naturally go in the document, and as I said, it locates itself underneath the pic.
Then I am able to position all of the rest correctly by using the position relative, yes that is easy and as expected, but the parent one, the price, is incorrectly positioned:

This would be so

li.listado_town{position:relative; bottom:160px; left:130px;}
li.listado_region{position:relative;bottom:150px; left:130px;}
li.listado_m2{position:relative;bottom:140px; left:130px;}

Answer 1

You can achieve this by telling the image to float: left; and making sure your table cell is wide enough

td {
    min-width: 400px;
}
img {
    margin-right: 10px;
    float: left;
}

• check this out: http://jsfiddle.net/zjA4f/

Alternatively, if you don’t want to specify the table widths, you could make the ul element inline. Added benefit of easily being able to position it with respect to the image using vertical-align:

img {
    margin-right: 10px;
    vertical-align: middle;
}
ul {
  display: inline-block;
  vertical-align: middle;
}

​

(See http://jsfiddle.net/zjA4f/2/)