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
    Regular Coder
    Join Date
    Oct 2009
    Posts
    434
    Thanks
    7
    Thanked 3 Times in 3 Posts

    Image is jumping outside the red background box.

    I am trying to get the red background area to grow so it is the same height as the image. I tried height: auto; and 100% but none of these work.

    How do I correctly do this please.

    Code:
    .redBarBGboxSubmittedPhotos { margin: 0 auto; height: auto; border: 1px solid #641416; background-color: rgb(100, 20, 22); padding: 5px 10px 5px 5px; color: #ffffff; font-style: italic; }
    .redBorderGreyboxSubmittedPhotos { border: 1px solid #641416; background-color: #D3C7C7; padding: 3px 10px 1px 5px; margin-bottom: 10px; font-size: 0.6em; }

    Code:
    <div class="redBarBGboxSubmittedPhotos" id="customerText"><img align="right" width="200" style="padding: 0px 0px 5px 10px;" src="images/small.jpg">Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah.</div>
    <div class="clearFloat"></div>
      <div class="redBorderGreyboxSubmittedPhotos">
      <div class="left" id="name">Bill A</div><div class="right" id="date">4th Jan 2014</div>
      <div class="clearFloat"></div>
      </div>

  • #2
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,536
    Thanks
    45
    Thanked 259 Times in 256 Posts
    Its doing just what you're telling it too, the difference is thought pattern: you don't want to clear after the image container, you want to clear after the image, so you want something more like this:

    Code:
    <div class="redBarBGboxSubmittedPhotos" id="customerText"><img align="right" width="200" style="padding: 0px 0px 5px 10px;" src="images/small.jpg">Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah.
    <div class="clearFloat"></div>
    </div>
    <div class="redBorderGreyboxSubmittedPhotos">
      <div class="left" id="name">Bill A</div><div class="right" id="date">4th Jan 2014</div>
      <div class="clearFloat"></div>
    </div>
    However, you might want to look for something called a "clearfix", like A new micro clearfix hack ? Nicolas Gallagher. There are a few different clearfixes out there. You can then apply the clearfix to the div containing the floated object. Also, for clarity, I'd recommend using css to float the object, not the align property, specially if you're trying to do other CSS work around it.

  • #3
    Regular Coder
    Join Date
    Oct 2009
    Posts
    434
    Thanks
    7
    Thanked 3 Times in 3 Posts
    are yes I see, thats a better way. I can see how that works.

    Thank you for your help on this one.


  •  

    Posting Permissions

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