Log in

View Full Version : 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?


<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:


<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:


<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...


<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...


<!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
Rain Lover
11-28-2010, 11:28 AM
Dear coothead,

As always your answers are the best!
coothead
11-28-2010, 11:40 AM
No problem, as always you're very welcome. :)