Aligning text + Images together

[Awesomexr]

Just to make it easier to explain, i quickly made a picture:



So any ideas on how to create that in HTML/CSS?

[xav0989]

Use the "float: left" property in CSS for each element. Put all the image text inside a containing div and right before the end of the div, add

<div style="clear: both;"> </div>

Overall code:

<div id="container">
    <img style="float: left;" ... />
    <div style="float:left; max-width: ??;" ...>Blah Blah Blah Blah Blah Blah</div>
    <img style="float: left;" ... />
    <div style="float:left; max-width: ??;" ...>Blah Blah Blah Blah Blah Blah</div>
    <div style="clear: both;"> </div>
</div>

[misson]

What behavior do you want if there isn't enough horizontal space for all the items?

To add a little to xav0989's answer, use classes, rather than inline styling, to associate a style to the elements. Make the names descriptive of what the elements are, rather than how they're styled (e.g. don't use the class "left").
Style:

ul.profiles, ul.profiles li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    overflow: auto;
}

.profiles li, .profiles li img, .profiles li .blurb {
    float: left;
}

.profiles li .blurb {
    max-width: ...;
}

Structure:

<ul class='profiles'>
    <li><img src="http://forums.x10hosting.com/programming-help/programming-help/..." /><div class="blurb">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></li>
    <li><img src="http://forums.x10hosting.com/programming-help/programming-help/..." /><div class="blurb">Donec fermentum orci nec felis.</div></li>
    <li><img src="http://forums.x10hosting.com/programming-help/programming-help/..." /><div class="blurb">Sed sollicitudin diam id sapien.</div></li>
</ul>

If you want the text to flow underneath the pictures, get rid of the .blurb elements.

[Awesomexr]

Thank you so much!