Hi all, I’m working on a layout that needs to have an image in the top left hand corner of the <td> and then paragraph text start immediately below it (i.e. the text shouldn’t flow around the image). I’ve tried the following:
The image is aligning just as I’d like it, but the text is flowing around the image. I thought display:block would fix this, so have I misapplied it or was I mislead?
Thanks @Zell Liew - that seems to have worked in the web browser. I’m writing this code for an html email so we’ll see how it performs in tests; I know that floats aren’t recognised in many email browsers so it’ll be interesting to see if your suggestion remains robust!
I wonder whether I’ll need to pull the image into its own <tr> if the clear: both doesn’t work, would that be your next port of call?
In your HTML, you have misapplied “px” to the height and width attributes. These attrrbutes should not have units of measure specified. Pixels are assumed.
Delete the align=“left” attribute from the image. It is a deprecated img attribute. That is the culprit that is causing the problem with the <p> alignment.
A <tr> cannot contain an image. It defines a table-row. Images can be applied to a table or a table-cell, but not a table-row. Very few attributes can be assigned to a table-row. I assume you guys were talking about applying the image in a <td> in a separate row.
As Ron said the align=“left” is much the same as float:left so declaring display:block will make no difference as floats are block elements anyway. Remove the align=“left” and set the image to display:block and the text will start underneath.
That’s true but for the purposes of html email it is the preferred method as floats don’t work in many email clients whereas align= does.
I was just coming to the realization that align=“left” would be effective in a table cell whereas float:left would likely not. So, even if deprecated, it still has potential.
Yes, you’re quite right - I was being lazy in my specification but I can assure you there is a <td> within my <tr>
While I agree that usually px are assumed, I’ve noticed that Outlook doesn’t always recognise this so I cross my 'T’s and dot my 'i’s when it comes to HTML email.
At the time I was writing this code, I was using ‘align=left’ as everything else in that <td> (including the <td>) was set to align to the centre/center. As it is, moving the image to a separate row has fixed the issue, but are you saying that setting an alignment is what made the display:block not work in the first place?
(thanks for your help, I’m still very much a beginner)
It’s not quite as simple as saying that <img align=“left”> caused the problem with the text, because additional code could have changed that behavior. But based only on the given information, yes, the float (align=“left”) caused the text to flow to the right of the image. As Paul pointed out, though, align=“” works in tables where floats may not. Fun stuff.
