SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Melbourne, Australia
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Using display: block

    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:

    Code:
    <a href="" target="_blank"><img src="image.png" alt="" title="" width="180px" height="42px" align="left" style="padding-bottom:10px; display:block;"></a>
    <p>Text here</p>
    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?

  2. #2
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Singapore
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try using a clearfix instead.

    One simple way to test it out is to include
    p {
    clear: both
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Melbourne, Australia
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Singapore
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah. I didn't know you're working with email layouts.

    I'll go for a <tr> straight since I think thats the best course of action

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Melbourne, Australia
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I should have specified *blush*

    Thanks for confirming my thoughts!

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Singapore
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Happy to help

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,578
    Mentioned
    63 Post(s)
    Tagged
    2 Thread(s)
    An [unrelated] FYI about the code snippit...

    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.
    Code:
    <a href="" target="_blank"><img src="image.png" alt="" title="" width="180px" height="42px" align="left" style="padding-bottom:10px; display:block;"></a>
    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.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Ron
    Delete the align="left" attribute from the image.
    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.

    Quote Originally Posted by Ron
    It is a deprecated img attribute.
    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.

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,578
    Mentioned
    63 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

    Thanks, Paul.

  10. #10
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Melbourne, Australia
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    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.
    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)

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,578
    Mentioned
    63 Post(s)
    Tagged
    2 Thread(s)
    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.

  12. #12
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Melbourne, Australia
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Fun stuff indeed! I think I'm a bit clearer on it now, thanks for your help @ronpat


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •