Aligning images and text with CSS instead of tables

Hello all,

I am trying to replace some <table>s on one of my websites with clean CSS
markup. I'm having trouble getting images and text to align in exactly the
way I want. The old markup looked like

<table><tr>
<td><img src="..." /></td>
<td>some text here</td>
</tr></table>

with the effect that the text was placed to the right of the image; the
vertical center of the text was aligned with the vertical center of the
image. This is what I'd like to reproduce with CSS. I started by trying

<p>
<img src="..." style="vertical-align: middle" />
<span style="vertical-align: middle">some text here</span>
</p>

This works great for small amounts of text. However, if the text wraps, the
second line begins below the image, whereas I'd like *all* of the text to be
positioned to the right of the image (and with the vertical centers still
aligned). Can anyone offer me some advice about how to set this up?

Many thanks!

--
Benjamin D. Esham | bdesham (AT) gmail (DOT) com | bdesham128 (AIM)
"Lasciate ogne speranza, voi ch'intrate." — Hell (via Dante)

On Mon, 06 Jul 2009 14:47:55 GMT
Benjamin Esham <bdesham (AT) gmail (DOT) com> wrote:

Hello all,

I am trying to replace some <table>s on one of my websites with clean
CSS markup. I'm having trouble getting images and text to align in
exactly the way I want. The old markup looked like

table><tr
td><img src="..." /></td
td>some text here</td
/tr></table

with the effect that the text was placed to the right of the
image; the vertical center of the text was aligned with the
vertical center of the image. This is what I'd like to reproduce
with CSS. I started by trying

p
img src="..." style="vertical-align: middle" /
span style="vertical-align: middle">some text here</span
/p

This works great for small amounts of text. However, if the text
wraps, the second line begins below the image, whereas I'd like
*all* of the text to be positioned to the right of the image (and
with the vertical centers still aligned). Can anyone offer me
some advice about how to set this up?

..img {
overflow: hidden;
color:#000;
background-coloralegreen;
margin: 0 0 0.5em 0;
zoom:1;
}
..img img {
float:left;
width:64px; /* width of image */
height:64px; /* height of image */
margin:5px;
}
..img div {
margin-left:74px; /* width of image + left & right margin */
padding-left: 0.3em;
color:#000;
background-color:lightyellow;
min-height:74px; /* height of image + top & bottom margin; */
}

<div class="img">
<img alt="example image" src="/example.png" width="64"
height="64">
<div>
<p>
Lorem ipsum …
</p>
<p>
Etiam dictum …
</p>
</div>
</div>

Float image example:
http://bootnic.bounceme.net/FloatImage.php



--
BootNic Mon Jul 6, 2009 01:18 pm
It is better to die on your feet than to live on your knees!
*Emiliano Zapata*

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v2.0.11 (GNU/Linux)

iEYEARECAAYFAkpSMdkACgkQmo2774GZ7qlAjwCfUlOYpgJc58 YGsW4E50d8b6vr
XzAAnAs9MXe58eqc5oGb3QrVnQWQEAJ/
=Q/nX
-----END PGP SIGNATURE-----

Benjamin Esham wrote:

I am trying to replace some <table>s on one of my websites with clean
CSS markup. I'm having trouble getting images and text to align in
exactly the way I want. The old markup looked like ...
...
This works great for small amounts of text. However, if the text
wraps, the second line begins below the image, whereas I'd like *all*
of the text to be positioned to the right of the image (and with the
vertical centers still aligned). Can anyone offer me some advice
about how to set this up?

If you don't mind a comment, rather than a solution, I'll venture that
right-side text aligned to the middle of a left-side image is unfriendly
to eye-flow - especially if the images are any significant amount of
height greater than the text.

I see what you are after on a lot of very amateur web sites.


+----------------------+

|
|
(big |
img) | We stayed at this beach house
|
|
|
+----------------------+

--
-bts
-Friends don't let friends drive Windows

In article <v8o4m.50412$IU6.31814 (AT) newsfe05 (DOT) iad>,
Benjamin Esham <bdesham (AT) gmail (DOT) com> wrote:

Hello all,

I am trying to replace some <table>s on one of my websites with clean CSS
markup. I'm having trouble getting images and text to align in exactly the
way I want. The old markup looked like

table><tr
td><img src="..." /></td
td>some text here</td
/tr></table

with the effect that the text was placed to the right of the image; the
vertical center of the text was aligned with the vertical center of the
image. This is what I'd like to reproduce with CSS. I started by trying

p
<img src="..." style="vertical-align: middle" /
<span style="vertical-align: middle">some text here</span
/p

This works great for small amounts of text. However, if the text wraps, the
second line begins below the image, whereas I'd like *all* of the text to be
positioned to the right of the image (and with the vertical centers still
aligned). Can anyone offer me some advice about how to set this up?

Yes, I see what you want. Clean CSS. Text middle with image middle. No
HTML tables. Sometimes you can have any two of a list of three. (Some
consultants like telling their clients that they can have cheap, good,
quick, pick any two! <g>)

1. The table markup certainly gets clean CSS because there is hardly any
need for much. Plus it is particularly apt for what you want in look and
behaviour, and plus it is semantically kosher if anything is. Why would
you resist it? I trust not for any silly reason like you should never
really use tables unless it relates prices to products or for something
very scientific looking!

2.Using CSS to make various elements behave like tables and cells.
Downside is browser support. Not bad on Safari, Firefox, iCab, Opera:

<http://dorayme.netweaver.com.au/byTableCSS.html>

3. Your non-table markup above with a little CSS would solve but it
would be a bit annoying: p {width: 1000000px}. <g>

--
dorayme