locked
Keeping "div" contents within the bounds of the div. RRS feed

  • Question

  • If I have:

    <div>Some text<br/>
    Some more text
    <img  blah blah />
    </div>

    How do I setug the div so that it alway encompasses whatever contents are between its tags?  All I've been able to do is increase the padding to make sure the whole image is inside the div boundaries on screen.

    Thanks


    Greg Maxey Please visit my website at: http://gregmaxey.mvps.org/word_tips.htm
    Saturday, January 14, 2012 5:51 AM

Answers

  • All of the images/forms are floated, which removes them from the page flow so that the div isn't aware that they exist. To make the div expand to contain them, add a clearig element following the images/forms, but before closing the div, like so

    ...

      <form method="post" action="https://www.paypal.com/cgi-bin/webscr">
      <input type="hidden" value="_s-xclick" name="cmd">
      <input type="hidden" value="HMGYMYSGL4WD4" name="hosted_button_id">
      <input type="image" alt="PayPal - The safer, easier way to pay online!" name="submit" src="http://gmaxey.mvps.org/images/Donate_GBL.png">
      </form>
    <br style="clear:both" />
    </div>

    You can then remove the padding.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    • Marked as answer by Greg Maxey Saturday, January 14, 2012 8:25 PM
    Saturday, January 14, 2012 5:02 PM

All replies

  • A div will always encompass its contents unless you've done something to prevent it, such as floating contents, or by setting width and/or height on the div that the contents can't fit into.

    Post a link.


    • Edited by KathyW2 Saturday, January 14, 2012 5:54 AM
    Saturday, January 14, 2012 5:53 AM
  • Kathy,

    Then I suppose the issue may be the image and three forms which are all floated left:

    http://gmaxey.mvps.org/_inc/Disclaimer_DonateBanner.html without the padding in the form images are out of bounds.

     

    .PayPalVerDonate {
     background-color: #8395AD;
     border: 1px solid #000;
     padding: 0em 0em 5em 0em;
     clear: left;
     color: #182130;
    }
    .PayPalVerDonate p {
     font-size: small;
     margin: 0em 1em 1em 1em;
     padding: 0em 0em 0em 0em;
     
    }
    .PayPalVerDonate div {
     width: 20%;
     float: left;
     text-align: center;
     margin: 0em 0em 0em 0em;

    }
    .PayPalVerDonate form {
     width: 25%;
     float: left;
     text-align: center;
     margin: 1em 0em 0em 0em;
    }
    .PayPalVerDonate h3 {
      text-align:center
     }


    Greg Maxey Please visit my website at: http://gregmaxey.mvps.org/word_tips.htm
    Saturday, January 14, 2012 8:44 AM
  • All of the images/forms are floated, which removes them from the page flow so that the div isn't aware that they exist. To make the div expand to contain them, add a clearig element following the images/forms, but before closing the div, like so

    ...

      <form method="post" action="https://www.paypal.com/cgi-bin/webscr">
      <input type="hidden" value="_s-xclick" name="cmd">
      <input type="hidden" value="HMGYMYSGL4WD4" name="hosted_button_id">
      <input type="image" alt="PayPal - The safer, easier way to pay online!" name="submit" src="http://gmaxey.mvps.org/images/Donate_GBL.png">
      </form>
    <br style="clear:both" />
    </div>

    You can then remove the padding.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    • Marked as answer by Greg Maxey Saturday, January 14, 2012 8:25 PM
    Saturday, January 14, 2012 5:02 PM
  • Thank you.


    Greg Maxey Please visit my website at: http://gregmaxey.mvps.org/word_tips.htm
    Saturday, January 14, 2012 8:26 PM