<div> placement within parent <div>'s

trying to get away from tables

[colinder]

I've been at this on-and-off for about a week, and still can't find anything. (~5 hrs today)
Can someone please tell me how to do this with '<div>'s, or point me in the right direction.
I've tried what feels like everything under the sun...

<div>
<tr>
<td align="left" valign="top"><img src="fe"/></td>
<td align="center" valign="middle"><img src="fi"/></td>
<td align="center" valign="middle"><img src="fo"/></td>
<td align="right> valign="bottom"><img src="fum"/></td>
</tr>
</div>

I'm particularily interested in placement of images within 'child' <div's>. If anyone can recommend a good link on this topic, I'd be greatful. I've been all over W3C, and that doesn't seem to work for me.

[colinder]

BTW, I'm trying to get away from tables.

I just used the <td>'s as an example...

thanx...

[ronin]

Are you looking for a liquid layout or do you have fixed pixel-widths?

For fixed pixel widths, I turned:

<table width="480">
<tr> 
<td align="left" valign="top"> <img src="fe" width="100" height="50"/> </td> 
<td align="center" valign="middle"><img src="fi" width="100" height="50"/></td> 
<td align="center" valign="middle"><img src="fo" width="100" height="50"/></td>
<td align="right" valign="bottom"><img src="fum" width="100" height="50"/></td> 
</tr> 
</table>

into...

<div style="width:480px;">
<img style="margin:0 380px 10px 0;" src="fe" width="100" height="50"/> 
<div style="width:480px; margin:10px auto; text-align:center;">
<img style="margin-right:10px;" src="fi" width="100" height="50"/> 
<img style="margin-left:10px;" src="fo" width="100" height="50"/>
</div> 
<img style="margin:10px 0 0 380px;" src="fum" width="100" height="50"/>
</div>

A liquid solution might take a little longer...

[SuzyUK]

depends on where you want them "contained" but floats would be an easy option too...

div img {float: left; margin-right: 50px;}
div {padding-left: 20px;}

<div>
<img src="fe" width="100" height="50"/>
<img src="fe" width="100" height="50"/>
<img src="fe" width="100" height="50"/>
<img src="fe" width="100" height="50"/>
</div>

Note: The element needn't be a div that was just my test code

Suzy

[ronin]

Hmmm... I started off thinking about floats as well, but I notice colinder has valign values in his table... which is why I switched to margins...

[HarryM]

Lots of useful advice above.

But it seems to me that what you are trying to end up with are 4 images each placed in individual ways in 4 containers arranged as 4 columns and 1 row. This suggests to me a table. Quick, easy to code, and hardly needs testing. If it works, why re-invent the wheel?

Horses for courses, and in some circumstances a tabular layout is best handled by tables.

Just my 2c worth :)

Harry