[choppy]

Hello, I could use some help with the above, please.

Here is the page I'm designing:
orbitingscientific DOT com / products.html

Originally I had used a 4 x 4 table, now CSS.
Although the text now wraps under the logos
if a user increases font size.

Can this be prevented?

Here's the code from my stylesheet:

div.products {
float: left;
width: 322px;
height: 10em;
margin-bottom: 0.5em;
}
div.products img{
float: left;
padding: 4px;
border: 0;
}

And the XHTML is:

<div class="products">
<a href="nic.html"><img src="images/p_nic.gif" alt="NIC" /></a>
<strong>NIC</strong> specializes in <strong>mercury analyzers</strong>, from
portable units to custom-built on-line process analyzers.
</div>

Thanks,
C K Yap
Malaysia

[foolfodder]

Maybe try putting the text in a <p> and then give the p a left-margin

[herkalees]

div.products {
float: left;
width: 322px;
height: 10em;
margin-bottom: 0.5em;
}
a.productImg {
float: left;
padding: 4px;
border: 0;
width: 200px; /* Change this to the real width of the image */
}
p.productDecription {
margin-left: 220px; /* Change this to the real width of the image, plus some more for white-space */
}

<div class="products">
   <a href="nic.html" class="productImg"><img src="http://www.designerstalk.com/forums/images/p_nic.gif" alt="NIC" /></a>
   <p class="productDescription"><strong>NIC</strong> specializes in <strong>mercury analyzers</strong>, from portable units to custom-built on-line process analyzers.</p>
</div>

[choppy]

Thank you, guys. I'm very new to CSS and I
appreciate the help.

I came up with a solution of my own while sleeping
(!). Just pad the image with 2em underneath.

Leaner code, but I know it's un-robust / cheating.
Sometimes I long for my <td> and <tr>. Life
was simple.

But I will bear your solutions in mind should the
descriptions lengthen.

- yap