Div with vertical-align

[gmmastros]

I'm trying pretty hard to move away from table to position items on my website, and I'm having a problem I hope someone can help with.

I'm trying to position an image to the left with words to the right. Currently, I have code that looks like...

<div style="float:left; padding-left:20px;">
    <img src="image.png" alt="alt tag" style="width: 84px; height: 68px;"/>
</div>
<div style="text-align:left; [!]vertical-align:middle;[/!]">
    This is the text.
</div>

Setting the vertical alignment seems to have no effect on the way the page is rendered. Obviously, I'm missing something here, but what.

-George

Strong and bitter words indicate a weak cause. - Fortune cookie wisdom

 

[Vragabond]

The css property [tt]vertical-align[/tt] is very badly supported in all the browsers (or it is intended to be so difficult). If you tell us what exactly you wanted to do, we can offer you suggestions on how to fix it.

First of all I suggest you get rid of the divs -- you could apply all the css information on the image itself and the other div should actually be a paragraph. In order how to achieve the text to be vertically centered, I suggest you use either margins, padding or line-height property. They're not exactly what you would get with vertical align if it worked, but most of the time they do the trick.

 

[gmmastros]

Vragabond,

Thanks for the help.

I am viewing the page in IE 6.

I am working on the Partners/Links page for my company's website. I have a series of images running down the left side of the page with a sentence or 2 describing the other company. I've resized the images so they have a consistent width. Now I'm trying to get the text to be vertically aligned with the images.

I know I could get this to work if I used margins and padding. It doesn't 'feel' right though. Know what I mean?

On Monday morning, I'll give your suggestions a try. Thanks for the help.

-George

Strong and bitter words indicate a weak cause. - Fortune cookie wisdom

 

[ChrisHunt]

vertical-align is very badly supported in all the browsers

Not true, the problem is that it doesn't mean what you might think it does. The obvious meaning would be for it to work like the valign attribute of a table cell (and, if you apply it to a table cell, that's what it does). However, W3C in their wisdom don't let it work like that on other elements, instead it controls the alignment of <img> elements within a line of text. See

http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align

for more, though it's pretty hard to follow.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Aron2]

If I understand what you're looking for (and maybe I'm not). Try it this way:

<p>
<img src="..." style="display:inline;float:left;" />
text...
</p>

That'll make the text go around the image, and have the image stay to the left.