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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts

    overflow: auto causing vertical scrollbar despite no explicit height

    Hey all,

    When you specify a rule of overflow: auto to an element, I was told that a scrollbar will only appear if you set an explicit width or height to the same element. Well, in the below case, I was getting a vertical scrollbar despite the fact that I specified no height rule on the div. The scrollbar only went away when I reluctantly added padding:

    Code:
    .layout {
    	width: 900px;
    	overflow: auto;
    	margin: auto auto;
    	padding: 3em;
    	background: url('/images/fieldsettran.png') repeat-y;
    }
    
    .layout div:first-child {
    	width: 300px;
    	float: left; 
    }
    
    .layout div:last-child {
    	width: 550px;
    	float: left;
    }
    Does anyone know the logic as to why the scrollbar appeared in the first place (despite no explicit height set to the div container) and why it was only when I specified padding did it go away?

    Thanks for any response.

    I don't know if it matters, but one of the divs contained form elements.
    Last edited by johnmerlino; 07-06-2010 at 02:27 AM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Because a padding of 3em on each side will cause the overall width to be 850px + 6em which is likely greater than 900px therefore a scrollbar will appear. I'm betting its just the horizontal scrollbar that is actually active.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Tags for this Thread

    Posting Permissions

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