CSS Text Wrapping issue and HTML setup of cohosts

Question

Ok, I have HTML setup like so:

<div class="bullet">
    <div style="float: left; padding-right: 1em;">
        <img src="images/ofn_bullet.png" alt="OFN" style="max-width: 100%; border: none;" />
    </div>
    <div style="float: left;">
        Cooperative Business Assistance Corporation<br />Camden, NJ
    </div>
    <br class="clear" />
</div>

There are a ton of these, listed on this page here: http://opportunityfinance.net/Test/2013conf/index.html They get listed 1 after the other, because, unfortunately I don't know how else to do this. Is there an easier way to do this for each Co-Host?? I've tried using a <ul> tag with the list-type-image being set, and having <li> tags for this (which was my first attempt), but I couldn't figure out how to get the image to resize as the page was resized, so I scrapped that attempt, and went with the following attempt above. But am now having other issues. Basically, both of these div tags have a float: left style which should work, however if you look at the pic below... doesn't work right when sizing it down:

Honestly, I don't know what to do, and I don't want to use a table. But I do need to align the text next to it so that it is in the middle of the image, if possible. Like the 2 lines should be vertically aligned in the middle vertical-align: middle , if possible. In any case, I need the text to stay on the right-hand side of the image at all times, even when the browser is resized down! Here is the CSS for what is being used:

.clear
{
    clear: both;
}

div.bullet
{
    display: block;
    width: 100%;
    text-align: left;
}

I'm wondering if there is a better setup solution for the Co-Hosts column, than what I am using. Keep in mind that the page needs to resize down (text and all) for smaller screen resolutions and cell phones. Can't have a horizontal scrollbar either.

Answer 1

Try removing float: left; on .bullet (the text div)

Answer 2

You could have the cohosts as an unordered list. You could then set the image as a background image for each list item.

<ul class='cohosts'>
    <li>The text</li>
    <li>The text</li>
</ul>

Then set the css to something like this

.cohosts li {
    padding-left: 20px; /* Whatever the with of the image */
    background-image: url('images/ofn_bullet.png');
}