Image next to a Division

[Rain_Lover]

Hi,

How can I put an <img> next to a <div> so the image vertically aligns in the middle?

<img src="comment-icon.gif"><div style="font:10pt Arial;padding:5px;background-color:#ccc;"><span style="float:right">No. 1</span><span style="font-weight:bold;padding-right:10px">John Doe</span><span style="color:#808080">11/14/2010 3:23:44</span></div>

I know how to do it using a table:

<table style="font:10pt Arial">
<tr>  
<td style="vertical-align:middle"><img src="comment-icon.gif"></td>  
<td style="width:100%">
<div style="padding:5px;background-color:#ccc;border-top:1px solid #DEDEDE"><span style="float:right">No. 1</span><span style="font-weight:bold;padding-right:10px">John Doe</span><span style="color:#808080">11/14/2010 3:23:44</span></div>
</td>
 </tr>
</table>

But I wonder if I could do it without a table.


Thanks in advance!
Rain Lover

[groovy]

Hi,
here is the solution in DIV

<div style="margin:0 auto;">
<img src="1.jpg" style="float:left; width:100px;">
<div style="width:200px;float:left; font:10pt Arial;padding:5px;padding-right:10px;background-color:#ccc;">
No. 1
<span style="font-weight:bold;">John Doe</span>
<span style="color:#808080">11/14/2010 3:23:44</span>
</div>
</div>

hope it helps :)

[SuzyUK]

another suggestion: one of the best way to align an image, especially an icon, vertically is to use it as a background image.

Typically icons are used many times per page (like the red balls here) so calling it from a background image reduces the number of http requests. It also allows you to change the image and "resize" the space required via the CSS alone - no matter if the image changes, or it's a different one depending on the "state" of the thing it pertains to, i.e. "new" post "read" post..

it also means you can take the presentation out of the HTML

so with code like this:

<div class="comment">
<span class="number">No. 1</span>
<span class="name">John Doe</span>
<span class="date">11/14/2010 3:23:44</span>
</div>

you can pretty much do anything with the CSS.. an example given your requirements is:

.comment {
font: 13px/2 arial, verdana, sans-serif;

/* line-height of 2 used instead of top/bottom padding the div either/or will do */

background: #ccc url(youricon.gif) no-repeat 5px 50%;

/* the 50% centers the background vertically then adjust the left position to suit */

border-top: 1px solid #dedede;
padding: 0 5px 0 40px;

/* adjust left padding to leave enough room to show the icon background and a "whitespace" border around it */

margin: 3px;
} 

.comment .number {float: right;}
.comment .name {font-weight: bold; padding-right: 5px;}
.comment .date {color: #808080;}

[Rain_Lover]

@ SuzyUK,

Thanks for the answer, although it's not the result I'm looking for.

[Rain_Lover]

Dear Suzy,

Hope you don't mind me getting back to you after a long time!

and a "whitespace" border around it

I wonder if you could tell me how to do it.

Thanks again!

[lucy24]

and a "whitespace" border around it

I wonder if you could tell me how to do it.

She did ;-) The line you quoted was an explanation of the immediately preceding bit of CSS. The "padding" property is visually the same as making an invisible border. (That is, a border that takes up space but uses your existing background color.) Unlike a "margin", it doesn't overlap with anything else. So two adjoining images with 1em padding will be 2em apart.

A quick-and-dirty way to see how padding works is to add something like {border: 1px solid red} and preview the page. The border is applied outside the padding. Experiment with the size of the padding; your thin red line will show you how far it extends.

[Rain_Lover]

@Lucy,

The padding doesn't create the effect I'm after. Would you mind trying my table code and compare it with Suzy's embed code result?

[alt131]

Hi rain_lover,

I'm late to this issue, but because Suzy usually creates ideal solutions I did compare it to your table to try to identify the trouble. I usually wouldn't try to figure out the OP's problem for them though, so perhaps think about helping us to help by identifying the issue yourself. I'm sure "It's not the result I'm looking for" made sense to you, but I've had that after solving a layout issue because the solution used an unwanted colour :)

Ok, your issue: Suzy's use of background-images to avoid server hits is sound reasoning (of course), but the background-color is displaying "around/behind" the image. I think that's the issue you want to solve.

If I have that right, this layout has traditionally been easier in tables because some browsers were slow to implement suitable css properties, others didn't conform to the recommendations.

But things have changed and there are several ways to achieve this. The one that suits your situation best will depend on what browsers you have to support - so if you can indicate which older browsers you are supporting (or not), it would be easier to make suggestions.

[lucy24]

Your original question was about centering the icon vertically. For experimental purposes, I recommend changing one of your text segments-- I used the "John Doe" one-- to a much longer slab of text. This will force the browser to wrap the text, letting you verify that the image is vertically centered. I tried the original short-text version in five browsers* and got four different results depending on what happens when you make the window absurdly narrow (trying to force a wrap). Once I changed to longer text, I could confirm that the image is always vertically centered, so that can't be the problem you're having. Unless, ahem, MSIE** has chosen to go its own merry way.

A side benefit is that this shows what happens to "No. 1" if other text slams right up against it. You'll want to add a bit of left padding there. You can also see the difference between top/bottom padding and line-height, since it affects display of the wrapped line.


* I'm on a Mac, so subtract Internet Exploder and add Camino to the standard list. I've also got the text editor's HTML preview, but that uses the Apple Web Kit so it's generally the same as Safari.

** In real life I make e-texts. They have to display as intended all the way back to MSIE 6-- without using javascript or anything fancy. Our last resort is the Conditional Comment.

[Rain_Lover]

Suzy's use of background-images to avoid server hits is sound reasoning (of course), but the background-color is displaying "around/behind" the image. I think that's the issue you want to solve.

I like the idea of using the image in the background, but the problem is in her solution the area around/behind the image is colored and this problem isn't browser-based. I tested her code in different browsers and saw the same issue.

[alt131]

Yes, rain_lover, but as I said, there are several ways to achieve what you want.
The issue isn't dependent on browser version, but the most suitable solution is.

[looter]

Make line-height of fonts same as image height.