SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Float image, push text below...

    Hello,

    I use the float: option in css on images a lot. It's nice. When I don't have enough text to fill to the next line I have to use <br /> to bring the next line down far enough to escape wrapping around the image. Here is an example:

    HTML Code:
    <h5>Accessible Recreation Opportunities</h5>
            <p><img src="images.jpg" alt="[Image] Accessible Fishing Platform" width="99" height="105" align="right" class="floatLeft"/>National Forest offers a number of recreation facilities 
              designed with <a href="recreation/accessible/">accessibility</a> in mind for persons with disabilities. 
              Accessible fishing piers, paved trails, specially designed campsites, 
              and accessible picnic tables are all available.</p>
            <h5>Camping</h5>
            <p><img src="image.gif" alt="National Forest" width="75" height="75" class="floatLeft" />Sites at almost all forest campgrounds are
              available on a first-come-first-served  basis,
              but there are some sites that can be reserved
              ahead of your arrival. </p>
    The text in the first <p> is not long enough to "fill" down far enough to push the next <h5> down, so the <h5> comes up and wraps the image also, but I would like to have the <h5> always be a new line BELOW whatever image is there reguardless of the amount of text or size of picture.

    Any how to's?

    Thanks
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hello,

    Because your images are not part of the paragraph they should be outside the paragraphs.
    Code:
    <h5>Accessible Recreation Opportunities</h5>
    <img src="images.jpg" alt="[Image] Accessible Fishing Platform" width="99" height="105" align="right" class="floatLeft"/>
    <p>National Forest offers a number of recreation facilities 
    designed with <a href="recreation/accessible/">accessibility</a> in mind for persons with disabilities. Accessible fishing piers, paved trails, specially designed campsites, and accessible picnic tables are all available.</p>
    <h5>Camping</h5>
    <img src="image.gif" alt="National Forest" width="75" height="75" class="floatLeft" />
    <p>Sites at almost all forest campgrounds are available on a first-come-first-served  basis, but there are some sites that can be reserved ahead of your arrival. </p>
    Not too sure about the question sorry, Any block level element will force a line break after it

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Ahh, I see it now.. You want to clear your headings, add clear: left;


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
  •