#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    39
    Rep Power
    2

    Don't want image spilling out of container div


    Hi all,

    On my page here I have a pink border on my container div but the border seems to ignore the image and so the image spills outside the container. Can I extend the border so that the image is inside the pink border instead of spilling outside? But I don't want to give the container div a fixed size because that will cause a new problem.

    Any ideas please?

    Thanks...
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    828
    Rep Power
    275
    since you are "floating" your image left, you can, also, use float:left in your container class to "contain" the image, or you can use the overflow property in your container class [overflow:hidden or overflow:auto] to "contain" it.

    Comments on this post

    • Juc1 agrees
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    39
    Rep Power
    2
    Originally Posted by DonR
    since you are "floating" your image left, you can, also, use float:left in your container class to "contain" the image, or you can use the overflow property in your container class [overflow:hidden or overflow:auto] to "contain" it.
    OK this works

    Code:
    .container {
    overflow: hidden;
    }
    Thank you
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    39
    Rep Power
    2
    Originally Posted by Juc1
    Code:
    .container {
    overflow: hidden;
    }
    This page is not very clear to me - can anyone please tell me what the above code means - like what in this case is being hidden?

    Thanks...
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Location
    Pennsylvania, USA
    Posts
    35
    Rep Power
    1
    Originally Posted by Juc1
    This page is not very clear to me - can anyone please tell me what the above code means - like what in this case is being hidden?

    Thanks...
    overflow:auto
    will usually put a vertical scroll bar for the user to scroll down to see the rest of the contents of the div, whereas
    overflow:hidden
    will not put the scroll bar and simply crop the contents below the visible area so that it is not accessible or viewable.
    Like my answer? No? Give us a visit anyway robowhiz.info.

IMN logo majestic logo threadwatch logo seochat tools logo