#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    455
    Rep Power
    16

    Spacing issue with a list of entries


    I have a list of faculty members with a picture and bio for each entry and I am having trouble creating a consistent amount of vertical space between the entries. This is because some of the bios are shorter than the picture and some are longer, requiring me (for the shorter entries) to add <br />s to the bio to reach the end of the picture. Of course, depending on the browser and display settings, a greater or smaller number of <br />s are needed to get to the end of the picture so code that looks right on one pc does not look right on another. Here's a sample of the code I am using:

    Code:
    <h3 class="blue_title">Bob Smith</h3>
    <p><em><img height="141" width="120" src="images/stories/bob.jpg" alt="bob" style="margin: 7px 10px 0px 0px; float: left;" />Faculty in Math and Physics.</em><br />The quick brown fox jumped over the lazy dog. <em>Since&nbsp;1999.</em></p>
    <br /><br /><br />
    <p> </p>
    <h3 class="blue_title">Edgar Jones</h3>
    <p><em><img height="141" width="120" src="images/stories/edgar.jpg" alt="edgar" style="margin: 7px 10px 0px 0px; float: left;" />Faculty in Spanish, Greek, Latin,<br />and Latin American History.</em><br />he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog.<em>Since&nbsp;2005.</em></p>
    <p> </p>
    Because the bio in the first entry is short, I need those three extra <br />s to reach the bototm of the picture (otherwise the next entry floats up and into the first). But as a result, the spacing between entries where the top entry needed <br />s looks wrong compared to other entries depending on the user's individual settings.

    Any sugestions for how to fix this problem? I guess I could set up a table and use different rows for each entry, but I was hoping not to need a table.

    Thanks.

    (p.s. - I am using joomla for this site but I don't think that's relevant to this question.)
    Alan
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,108
    Rep Power
    4307
    CSS provides a much better solution. The "clear" property will cause an element to sit below any floats that come before it. In this case, give "clear:left" (or "clear:both") to the <h3> elements.

    Also CSS should be used to create spacing between elements, not empty paragraphs (<p>) or line break elements (<br>).

    P.S. Why are you using a style attribute on those images? It would be better to use a class.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    455
    Rep Power
    16
    I may have figured it out: do I simply use style: "clear: both" in each beginning <p> ?
    Alan
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    455
    Rep Power
    16
    Sorry, Kravitz, i didn't notice your suggesting earlier when I posted a second time. I'll go with your approach...thanks!
    Alan
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,108
    Rep Power
    4307
    You're welcome.

    We posted at the same time, so it's unlikely you could have seen mine until after you made yours.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2017
    Location
    Ahmedabad
    Posts
    17
    Rep Power
    0
    Hi,

    You can use the below code and Spacing issue with a list of entries solve your problem

    //HTML CODE
    Code:
    <div claa="myclass">
    <h3 class="blue_title">Bob Smith</h3>
    <em><img height="141" width="120" src="images/stories/bob.jpg" alt="bob" style="margin: 7px 10px 0px 0px; float: left;" />Faculty in Math and Physics.</em><br />The quick brown fox jumped over the lazy dog. <em>Since&nbsp;1999.</em>
    </div>
    <div class="myclass1">
    <h3 class="blue_title">Edgar Jones</h3>
    <p<em><img height="141" width="120" src="images/stories/edgar.jpg" alt="edgar" style="margin: 7px 10px 0px 0px; float: left;" />Faculty in Spanish, Greek, Latin,<br />and Latin American History.</em><br>he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog.<em>Since&nbsp;2005.</em>
    <p> </p>
    </div>
    //CSS CODE

    Code:
    .myclass
    {
      float:left;
      postion :fixed;
      
    }
    
    .myclass1
    {
      float:left;
      postion :fixed;
      
    }
    Thanks.
  12. #7
  13. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,108
    Rep Power
    4307
    ifour.turakhia, wrapping an element around each heading and image pair and then floating the wrapping elements is one alternative solution, but how would using fixed positioning help? Why would making them not scroll with the rest of the page be desirable?

    P.S. Why do you feel the need to reply to threads that are over a year old?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo