Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Images and wrapping around a p

    I have a problem...i'm pretty new at css.

    I am trying to do a page where I have a bunch of testimonials one after another with a hr in between. Some of these have images that I have floated to the left. Each of the testimonials is in a p tag.

    What is happening though is that when the image is bigger than the testimonial, the hr and the next testimonial are also wrapping around the image. I don't want it to do that. I want it to be only the associated testimonial next to the image, the hr under the image and testimonial and then the next testimonial. Make sense?

    How can I do that?

    Thank you so much for your help!
    Neha

  • #2
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    You need to clear the float so that it won't overflow the paragraph. A good place to do this would be the <hr>, since you're using it anyway and it's guaranteed to follow the paragraph.

    Code:
    CSS:
    
    #testimonials p {
      /* paragraph rules */
    }
    #testimonials img {
      float: left;
      margin-right: 10px;
      }
    #testimonials hr {
      clear: both;
      }
    
    
    HTML:
    <div id="testimonials">
      <p><img src="something.gif" alt="Something" height="100" width="100" />Text text text text text blah blah blah</p>
      <hr />
      <p><img src="something2.gif" alt="Another Something" height="300" width="100" />Text blah blah</p>
      <hr />
    </div>

  • Users who have thanked vtjustinb for this post:

    gapoochi (10-08-2007)

  • #3
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you so much! That worked perfectly!

    I so badly want to get the hang of this. These solutions seem so easy and yet I was trying all sorts of complicated things to try to make it work!

    Thank you again for the help and for the quick reply.
    Neha


  •  

    Posting Permissions

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