SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist
    Join Date
    Nov 2003
    Location
    England
    Posts
    540
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Paragraph with floated image, border to bottom?

    Hi all,

    Say I have this:

    Code:
      p { padding:10px; border-bottom:1px solid #CCCCCC; }
      p img { float:right; width:250px; height:250px; }
      .clear { clear:both; }
    Then:

    HTML Code:
       <p>
          <img src="image.gif" />
          some blurb goes here
    
          <div class="clear"></div>
       </p>
    The border on the paragraph is behind the image, rather then at the bottom of the image, where the paragraph ends.

    How do I fix this? I thought clearing the float would do it..

  2. #2
    SitePoint Evangelist
    Join Date
    Nov 2003
    Location
    England
    Posts
    540
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Found a way around it for now on the project im working on, id still be interested to learn why this happens though?

    It seems that floated elements don't effect their parent elements in anyway?


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
  •