SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image clear left, text clear right

    Hi,
    I'm trying to replicate a table layout with images on the left and text on the right in a long list. The original table looked like this:

    HTML Code:
    <table>
      <tr>
        <td><img></td>
        <td>Text to accompany image</td>
      </tr>
      <tr>
        <td><img></td>
        <td>Text to accompany image</td>
      </tr>
      <tr>
        <td><img></td>
        <td>Text to accompany image</td>
      </tr>
    </table>
    What I've done is wrap the lot in a paragraph tag and then floated the image left, like this:

    HTML Code:
    <p>
      <img style="float: left;">
      Here is some text
    </p>
    <p>
      <img style="float: left;">
      Here is some text
    </p>
    <p>
      <img style="float: left;">
      Here is some text
    </p>
    Which works fine as long as the text doesn't go down the page further than the image. If it does, then it wraps and some of the text ends up below the image. How can I ensure that there's always white space underneath the image?

    I'm sure someone is going to tell me to use a table, but I actually can't in this case - the HTML is being dynamically generated and various elements need to be enabled or disabled depending on various parameters and using a table would ruin all the other potential layouts.

    Cheers,
    Matt

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi Matt, and Welcome to Sitepoint

    Separate the elements in the html and give the paragraphs a margin to push them out of the way of the floats.
    Code:
    img { float: left }
    p { margin-left: 200px }
    Code:
    <img>
    <p>Here is some text</p>
    <img>
    <p>Here is some text</p>
    <img>
    <p>Here is some text</p>
    I'm sure someone is going to tell me to use a table
    I should hope no-one here would suggest marking up what you have above in a table. There are many Web Standards enthusiasts here


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
  •