lumpong_bayag
New Member
Ok, I have HTML setup like so:\[code\]<div class="bullet"> <div style="float: left; padding-right: 1em;"> <img src="http://stackoverflow.com/questions/15672180/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>\[/code\]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 \[code\]<ul>\[/code\] tag with the \[code\]list-type-image\[/code\] being set, and having \[code\]<li>\[/code\] 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 \[code\]div\[/code\] tags have a \[code\]float: left\[/code\] 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 \[code\]vertically aligned\[/code\] in the \[code\]middle\[/code\] \[code\]vertical-align: middle\[/code\], 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:\[code\].clear{ clear: both;}div.bullet{ display: block; width: 100%; text-align: left;}\[/code\]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.