Image next to a Division

**Rain Lover** · 11-27-2010, 11:35 AM

Hi,

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

Code:

<img src="http://devcentral.f5.com/weblogs/images/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:

Code:

<table style="font:10pt Arial">
<tr>    
<td style="vertical-align:middle"><img src="http://devcentral.f5.com/weblogs/images/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

**X96 Web Design** · 11-28-2010, 02:58 AM

You'll have to use the float CSS property... Try this:

Code:

<img src="http://devcentral.f5.com/weblogs/images/comment-icon.gif" style="float:left">
<div style="font:10pt Arial;padding:5px;background-color:#ccc; float:right"><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>

And you can wrap all that in another Div to keep the width manageable...

Code:

<div style="width:650px">
<img src="http://devcentral.f5.com/weblogs/images/comment-icon.gif" style="float:left">
<div style="font:10pt Arial;padding:5px;background-color:#ccc; float:right"><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>
</div>

Hope that helps...

- Alex

**Rain Lover** · 11-28-2010, 09:23 AM

Thanks for the answer, but your code doesn't provide the result/effect I'm looking for. Please try my table code.

**coothead** · 11-28-2010, 10:36 AM

Hi there Rain Lover,

try it like this...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
body {
    font-family:arial,serif;
    font-size:13px;
 }
#info {
    line-height:26px; 
    border-top:1px solid #dedede;
    background-color:#ccc;
 }
#info img {
    float:left;
    padding:7px 4px 6px 3px;
    margin-top:-1px;
    background-color:#fff;
 }
#no1 {
    float:right;
    margin-right:5px;
 }
#jd {
    padding:0 6px 0 5px;
    font-weight:bold;
 }
#date {
    color:#808080;
 }
</style>

</head>
<body>

<div id="info">
 <img src="http://devcentral.f5.com/weblogs/images/comment-icon.gif" alt="">
 <span id="no1">No. 1</span>
 <span id="jd">John Doe</span>
 <span id="date">11/14/2010 3:23:44</span>
</div>

</body>
</html>

coothead