FLOAT Knocking Out Vertical Alignment [Archive]

Digital Jedi

11-30-2008, 04:16 PM

I don't usually get stumped on these things, but I've looked too long at this now, and I'm probably not seeing the forest for the trees here.

I'm working on forumhome_forumbit_level2_post and trying to put a cap on the end of the table division. For the sake of making this easy to test what I'm doing, here's the compartive HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello</title>
<style type="text/css">
.alt2 { background:#2F3C46; padding:0 0 0 0; color:#000000 }
.forumhome_background { background:#2F3C46 url('DJs_ Bubbles/special/forumhome_background.gif') repeat-x top left;height:111px }
.forumhome_ender { background:#2F3C46 url('DJs_ Bubbles/special/forumhome_ender.gif'); height:111px;width:50px }

</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" align="center" width="828px" style="height:111px;vertical-align:middle">
<tr>
<td class="alt2"><img src="DJs_ Bubbles/statusicon/forum_old.gif" alt="" border="0" id="forum_statusicon_$forum[forumid]" /></td>
<td class="alt2 forumhome_background" style="width:100%;">
<img src="DJs_ Bubbles/special/forumhome_ender.gif" border="0" alt="" style="float:right"/>
<div class="smallfont"><b>$forum[title]</b></div>
<div class="smallfont">$forum[description]</div>
<div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div>
</td>
</tr>
</table>

</body>
</html>

There's all kinds of crap in there at this point, but what I'm trying to do is get is the image in red there to cap off the end of that TD. The problem is, it floats fine and caps it off perfectly, but the wrapping text insists on aligning to the top of the TD. I don't know if float in an image is valid or not, but I've tried putting it in a floating DIV as well. Pretty much anything floating in that container knocks out the vertical alignment. Obviously, vertical-align isn't going to do anything for me, so I'm lost on how I can force the content to stay middle.

I'll try anything at this point. I even tried a nested table, but that had it's own problems which should probably be left for another time.

Seven Skins

11-30-2008, 10:08 PM

Can you make another table cell and put your image in that?
BTW. One <div> tag is missing in front of <strong>.

.

Digital Jedi

12-01-2008, 02:52 AM

Not without trying to add a whole new column to the table it will be part of. Problematic and likely going into more templates then I'd like to edit. I'd like to keep it light.

Lynne

12-01-2008, 03:01 AM

Try putting your image in a div tag or span tag and float that right.

Digital Jedi

12-01-2008, 03:07 AM

I did, actually, try both, and even tried some random things like text or different images. It's the float that's pushing the text to the top. If there was some other way to put that image on the end. I can't use a background because I've already set that for something else.

Lynne

12-01-2008, 03:17 AM

Did you also float the other divs in that column to the left at the same time?

Digital Jedi

12-01-2008, 03:28 AM

Sure did. It doesn't seem to accept any changes to the alignment of the cell as long as that float is in there. I'm searching now to see if there are any alternatives to adding it in as a float, background or additional cell.