Lining up 3 images without tables

or without absolute positioning

[twist]

I am trying to line up 3 images without using tables.

First image: 398x96
Second image: 100x150
Third image 141x96

I need the first and third image to align to the top and have text underneath.

If I use "display:inline;" I can align all three images inside a <div> but I would like to wrap 3 divs inside a div and then have the images inside the three divs.

I am trying relative positions and floating but I can't seem to get it working, sorry for the poor example, if need be I can post some code or explain my question better just ask.

[SuperNovaCain]

Example 1
Neat... I went looking and found this tag. I didn't check to see if it's officially supported, but it renders properly in ff.

<nobr
><img src="non.gif" width=398px height=96px
><img src="non.gif" width=100px height=150px
><img src="non.gif" width=141px height=96px
></nobr>

Example 2
Anyway, the solution I assume you are trying to avoid is...

<table>
<tr>
<td nowrap
><img src="non.gif" width=398px height=96px
><img src="non.gif" width=100px height=150px
><img src="non.gif" width=141px height=96px
></td>
</tr>
</table>

Example 3
There is a css equivalent of the old table cell "nowrap". It's "white-space" and it's allowed 3 values. (normal ¦ pre ¦ nowrap)

<span style="white-space:nowrap;"
><img src="non.gif" width=398px height=96px
><img src="non.gif" width=100px height=150px
><img src="non.gif" width=141px height=96px
></span>

Example 4
This will allow you to put as much text as you want under their respective images and only the text will wrap. The 3 images remain inline, no matter the size of the window.

<div style="width:639px;">
<div style='float:left;width:398px;'>
<img src="non.gif" width=398px height=96px><br>
Image 1 text Image 1 text Image 1 text Image 1 text Image 1 text Image 1 text Image 1 text Image 1 text Image 1 text Image 1 text Image 1 text Image 1 text Image 1 text Image 1 text Image 1 text Image 1 text
</div>
<div style='float:left;width:100px;'>
<img src="non.gif" width=100px height=150px>
</div>
<div style='float:left;width:141px;'>
<img src="non.gif" width=141px height=96px><br>
Image 3 text Image 3 text Image 3 text Image 3 text Image 3 text Image 3 text Image 3 text Image 3 text Image 3 text Image 3 text Image 3 text Image 3 text Image 3 text Image 3 text Image 3 text Image 3 text
</div>
</div>

SuperN¤vaCain

[iamlost]

I see two main approaches: float or absolute:

CSS for Float:

#wrapper {width: 640px; height: 150px;
}/* height made equal tallest image - adjust to taste */

#image1 {float: left; width: 398px;
}
#image2 {float: left; width: 100px;
}
#image3 {float: left; width: 141px;
}
/* the following can be excluded - were used to size test images to your specifications */
#image1 img {width: 398px; height: 96px;}
#image2 img {width: 100px; height: 150px;}
#image3 img {width: 141px; height: 96px;}

CSS for Absolute:

#wrapper {position: relative; width: 640px; height: 150px;
} /* height made equal tallest image - adjust to taste */

#image1 {position: absolute; left: 0; top: 0; width: 398px;
}
#image2 {position: absolute; left: 398px; top: 0; width: 100px;
}
#image3 {position: absolute; left: 498px; top: 0; width: 141px;
}
/* the following can be excluded - were used to size test images to your specifications */
#image1 img {width: 398px; height: 96px;}
#image2 img {width: 100px; height: 150px;}
#image3 img {width: 141px; height: 96px;}

HTML:

<div id="wrapper">

<div id="image1">
<img src="test-image.jpg" alt="" /> Some Text Goes Here.
</div>

<div id="image2">
<img src="test-image.jpg" alt="" />
</div>

<div id="image3">
<img src="test-image.jpg" alt="" /> Some Text Goes Here.
</div>

</div>