1. Home
  2. Forums Index
  3. Browser Side / CSS 2:01 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

IE Ignores Bottom Padding with overflow:auto;

         

tidalwav1

6:54 pm on Mar 19, 2011 (gmt 0)

10+ Year Member



IE 8 and 9 (haven't tried earlier) seem to omit rendering bottom padding inside a div with overflow:auto, while the latest Firefox and Chrome work as expected. Try the following example: 



<!DOCTYPE html> 
<html> 
 <head> 
 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
 <meta name="language" content="en" /> 
 <title>IE Padding Test</title> 
 </head> 
 <body> 
 <div style="width:400px; height:400px; overflow:auto; padding:40px;"> 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 <br /><br /> 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 <br /><br /> 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 <br /><br /> 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 <br /><br /> 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 <br /><br /> 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </div> 
 </body> 
</html>


Looking around the web, I found a possible solution here:

[mdj.us...]

That site essentially says to add this code to your affected page: 


<!--[if IE]>
<style type="text/css">#yourdiv {padding-bottom:40px;overflow:visible;overflow-x:auto;overflow-y:hidden}</style>
<![endif]-->


The problem with this approach is that it causes padding to be incorrectly rendered below the overflow scrollbar, instead of inside it (as expected) like other browsers do.

Any thoughts or solutions around this?

SuzyUK

9:54 pm on Mar 19, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Quick look around says it's one of those x-browser differences that occur because the specs aren't clear, it is only IE8 (and you say 9 too), 7 is "ok" though previously I think Safari 3 also treated it like IE8 as did a Gecko, there may be others.

I found a complex solution involving an absolutely positioned div.. but I think to keep it simple and stable and working in all browsers regardless of their mood, lol, is to simply nest a div in the scrolling one and put the padding on the nested div, not too bad a solution as the height/width can then be more accurately controlled on the scrolling div. Apparently, though I haven't measured this, the bottom padding (and right padding can be affected too actually) that does get rendered on an overflowing div is not always the same amount x-browser or versions either so this way is likely a good fallback for a while.. that's my thoughts anyway

a summary:


HTML:
<div id="scroll"><div>
.. loads of content..
</div></div>

CSS:
#scroll {
width: 400px;
height: 600px;
overflow:auto;
}

#scroll > div {
padding: 100px 40px;
}

tidalwav1

4:33 am on Mar 20, 2011 (gmt 0)

10+ Year Member



Thanks for your insights, this worked well.

Only other solution I had thought of was adding a div with a specific class at the bottom of the page, then styling that class with a fixed height inside an "if IE" conditional comment.

Your solution is much more elegant - thank you!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 2:01 pm May 1, 2026