[Solved] Floating / Aligning Image and Div Help

[syntax53]

Picture worth a thousand words: https://drive.google.com/file/d/0B8Eimq6oXM38aWJLdTlwUXg5SXM/view?usp=sharing

It’s an RSS feed that I’m trying to format in a wordpress widget I made. I want an image on the left, preferably vertically centered, and the text on the right. The height of each item (img+text) will depend on the amount of text in the title.

I don’t want to have to specify any hard coded heights or width’s other than on the image itself. A min-height to make sure the image fits is fine. Current code:

<div id="simple_rss_widget-2" class="widget widget_simple_rss_widget"><h3>Social Media Feed</h3> <div class="simple_rss_widget_wrapper"><ul>
<li>
<img src="//fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/s130x130/10277343_796223467082091_6567561480508408878_n.jpg?oh=20c2610930e9ae68de01c0380ed3c9f1&oe=55958F9B&__gda__=1431990310_edaf86d22a7e104ced37033a6332ed24" class="simple_rss_widget_img" />
<span class="simple_rss_widget_item_text">Abington defeated National Conference rival Pennsbury 63-50 to capture the...</span>
</li>
<li>
<img src="//www.abington.k12.pa.us/rss/logo.jpg" class="simple_rss_widget_img" />
<span class="simple_rss_widget_item_text">On Tuesday, February 10, 2015 all Abington School District schools will...</span>
</li>
<li>
<img src="//fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-xap1/v/t1.0-9/s130x130/10675_794244770644950_4733054475103086072_n.jpg?oh=e205faa74bd3274fabaafcd6df8d36c1&oe=55605343&__gda__=1435912889_3b8f5fa1f0c069137707b11b811e0dcd" class="simple_rss_widget_img" />
<span class="simple_rss_widget_item_text">Students from Overlook Elementary School made scores of flower...</span>
</li>
(.... etc ... )
</ul></div>
</div>

CSS–

`div.simple_rss_widget_wrapper {
margin:5px;
padding:5px;
max-height:400px;
overflow-y:scroll;
}
div.simple_rss_widget_wrapper ul {
list-style:none;
margin:0;
}
div.simple_rss_widget_wrapper ul li {
font-size:0.8em;
padding:3px;
margin-bottom:2px;
-moz-border-radius:5px;
border-radius:5px;
border:thin #C0C0C0 solid;
min-height:55px;
}

img.simple_rss_widget_img {
border:none;
float:left;
margin:2px 5px 2px 2px;
max-width: 50px;
max-height: 50px;
width: 100%;
height: auto;
}
`

[Paulie_D]

Don’t use floats..use display:inline-block?

http://codepen.io/Paulie-D/pen/yypjzK

img.simple_rss_widget_img {
    border:none;
    margin:2px 5px 2px 2px;
    max-width: 50px;
    max-height: 50px;
    width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: middle;
}

[syntax53]

Thanks for the reply. The image is not vertically centered, but the text at least is (also desired). Also the text is wrapping under the img. I figured I needed to add more wrappers. Working on a jsfiddle here: http://jsfiddle.net/geah4ows/30/

edit: so close: http://jsfiddle.net/geah4ows/70/

[syntax53]

Success: http://jsfiddle.net/geah4ows/74/

[Author]

Posts