I haven't got Dreamweaver but the principle will be the same but the way it is inserted in DW is not known to me.
Images and text will normally flow side by side if both are inside a <p> tag, but the text will align with the bottom of the image unless you style the image as vertical-align: middle and set the line-height to suit the image.
See http://www.wickham43.supanet.com/tut...#textalignvert
In the example you give the text is on two rows next to the image so the above method won't work. it's better in this case to create a containing div and put an image and p tag inside, both with float: left to be side by side and the p tag with the text (on as many rows as you want). This means that the image and text are kept separate and the heights relative to eachother can be adjusted with margin-top.
<div style="clear: both;"><!--containing div-->
<img style="float: left; margin: 10px;" src="100x100green1.jpg"
alt="image description 1">
<p style="float: left; margin-top: 15px;">Text first row<br>text
second row</p>
</div>
<div style="clear: both;"><!--containing div-->
<img style="float: left; margin: 10px;" src="100x100green2.jpg"
alt="image description 2">
<p style="float: left; margin-top: 15px;">Text first row<br>text
second row</p>
</div>
If the image and text row(s) are not centralised vertically, adjust the margin-top of the p tag with text to adjust the text. The float: left is to make the image and p tag show side by side. <p> tags in IE and Firefox have different default margins so the text will appear in different height positions unless you code a specific margin-top for the <p> tag which will make them the same.
The clear: both in the containing divs is to make them show one below the other because in this situation they seem to show side by side otherwise (probably inheriting the float: left from the nested image and p tags which has to be cleared). The image margin: 10px; is to keep the images apart vertically and away from the <p> tag horizontally.
I have tested the above. It's best to put styles in a class or id but I put them in the html markup above so that it's clear where they apply.
------------------------
I looked at the source code of the http://www.music.com/ site and saw that they used a list with ul and li tags. I didn't look at their stylesheet but I could make that solution work in a similar way by using the li tag instead of the containing div. The image and <p> tag both need float: left to sit side by side.
styles in head section:-
<style type="text/css">
ul { list-style-type: none; margin: 0; padding: 0; }
li { margin: 0; padding: 0; clear: both; }
.image { float: left; margin: 10px; }
.text { float: left; margin-top: 15px; }
</style>
HTML markup:-
<ul>
<li>
<img class=" image" src="100x100green1.jpg" alt="image
description 1">
<p class="text">Text first row<br>text second row</p>
</li>
<li>
<img class=" image" src="100x100green2.jpg" alt="image
description 2">
<p class="text">Text first row<br>text second row</p>
</li>
</ul>
Last edited by Wickham; 08 Apr 2008 at 05:09 AM.
Code downloaded to my PC will be deleted in due course.
WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.