SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Temecula, CA
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <img> within box model

    I'm reasonably comfortable with the behavior of the box model and its margin / padding behavior. But I don't get how to relate the <img> to the box that contains it.

    If I place some text within <div><p></p></div> the div (its border, background, etc.) expands downward to hold the contents of the <p> or <p>s within it. But if I place an <img> within the <div> the dimensions of the <div> utterly ignore the <img>. I've even tried placing the <img> within a <p>.

    Is there a way to get a <div> to expand downward to the size of the image within it?

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The div with the text in it behaves nicely because your text is inside a <p>, which is a block-level element. Look what happens when you have a div with only text and nothing else in it. It occupies the whole line and the behaviour is exactly the same with an image, because images are inline elements. To make the image look like you want it to, you have to give the div a position of absolute or float.

    But in any case, it seems to me the div expands nicely vertically, it's just when you want it to wrap around the image horizontally that you have to give it a position of absolute or float.

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Temecula, CA
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Float did it for me. Without float'g the div the images were still hanging down below the div.

    Thanks.


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
  •