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 8 of 8

Thread: Lost padding!

  1. #1
    Regular Coder
    Join Date
    Nov 2009
    Posts
    200
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Lost padding!

    Hi,

    I tried the following in IE8 and the latest versions of Firefox and Opera:


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <style type="text/css">
    div
    {
    background-color:#00FFFF;
    width:300px;
    height:82px;
    overflow:auto;
    white-space:nowrap;
    padding:0 20px;
    }
    </style>
    </head>
    
    <body>
    
    <div>
    <img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="">
    <img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="">
    <img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="">
    <img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="">
    <img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="">
    <img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="">
    </div>
    
    </body>
    </html>
    There's no padding on the right. What am I missing?

    Many thanks in advance!
    Mike

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    adjust width:480px (total width of images you want to have in div.

    overflow property does not work if width or height is defined.



  • #3
    Regular Coder
    Join Date
    Nov 2009
    Posts
    200
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vikram1vicky View Post
    adjust width:480px (total width of images you want to have in div.

    overflow property does not work if width or height is defined.


    I don't have a fixed number of images.

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    The dont mention width property at all.... let me wht u want 2 do.... all images should be in 1 line only they can be in multiple lines???

  • #5
    Regular Coder
    Join Date
    Nov 2009
    Posts
    200
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vikram1vicky View Post
    all images should be in 1 line only they can be in multiple lines???
    One line.

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    use min-width then: set it to the width of one image possibly and a max-width for the largest width you have.

    Might I add that white-space: nowrap probably not the best option here. Might even consider using floats for the images

    The only time I use white-space: nowrap is for text-overflow: ellipsis and for user-input titles. I don't see a need for it other than that.
    Last edited by Sammy12; 07-17-2011 at 09:34 PM.

  • #7
    Regular Coder
    Join Date
    Nov 2009
    Posts
    200
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    use min-width then: set it to the width of one image possibly and a max-width for the largest width you have.

    Might I add that white-space: nowrap probably not the best option here. Might even consider using floats for the images

    The only time I use white-space: nowrap is for text-overflow: ellipsis and for user-input titles. I don't see a need for it other than that.
    I'm confused! Would you mind providing an embed code?

  • #8
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    What the two above are asking is, are all your images the same size or different sizes? If all the images are the same size, you need to make sure that you add all their widths together + 40px padding. That total should be less than your set width that you have for the containing div, which is 300 px. If that total is not less than 300px, then you need to adjust the containing divs width to a larger size than the total.
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^


  •  

    Posting Permissions

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