Ie7 - Relatively Positioned Div Does Not Scroll in Its Container

ie7 - relatively positioned div does not scroll in its container

The quick and dirty fix would be to add position:relative; to the container with the overflow:auto; property.

Though, I would strongly suggest you consider rethinking your layout to not rely on position absolute/relative and instead use floats if possible.

Updated jsfiddle: http://jsfiddle.net/Z987x/1/

IE7 scrollbars when position:relative item WAS out-of-screen

Use negative margins instead of negative left

...
left:0;
margin-left:-90px; 

IE7 Scrollbar doesn't work

I think this is because IE7 and IE6 are not interpreting your overflow-x and overflow-y properties correctly:

#content_box  {
float:left;
height:456px;
margin-left:20px;
overflow-x:hidden;
overflow-y:scroll;

this is easy to explain for IE6: It simply doesn't know those attributes. As for why it doesn't work in IE7, maybe the explanation is here (It's too complicated for me to understand, I haven't eaten lunch yet).

I think what might work (after a very cursory examination of your code, don't sue me if it doesn't) is to introduce an additional divcontainer with no width set. That would auto-adjust any width: 100% elements inside it in a way that prevents overflows. (I assume why this is a problem in the first place is box model issues in conjuction with margin-left: 20px, correct?)

IE7 Div Bug overflow:auto

I can't understand why, but removing white-space: normal; from .Chart_Small fixes this bug for me. Can you check if it works for you?

fix absolute position overflow not showing in ie7

To fix it in IE7, do the following:

Remove:

position: relative;

From .navbar-inner

It's a bit redundant to have it on inner, because it's container is already set to a relative position (they are the same size/shape). It will carry the same effect without it on the inner div, and give you the results you're looking for.

Fixed position but relative to container

Short answer: no. (It is now possible with CSS transform. See the edit below)

Long answer: The problem with using "fixed" positioning is that it takes the element out of flow. thus it can't be re-positioned relative to its parent because it's as if it didn't have one. If, however, the container is of a fixed, known width, you can use something like:

#fixedContainer {
  position: fixed;
  width: 600px;
  height: 200px;
  left: 50%;
  top: 0%;
  margin-left: -300px; /*half the width*/
}

http://jsfiddle.net/HFjU6/1/

Edit (03/2015):

This is outdated information. It is now possible to center content of an dynamic size (horizontally and vertically) with the help of the magic of CSS3 transform. The same principle applies, but instead of using margin to offset your container, you can use translateX(-50%). This doesn't work with the above margin trick because you don't know how much to offset it unless the width is fixed and you can't use relative values (like 50%) because it will be relative to the parent and not the element it's applied to. transform behaves differently. Its values are relative to the element they are applied to. Thus, 50% for transform means half the width of the element, while 50% for margin is half of the parent's width. This is an IE9+ solution

Using similar code to the above example, I recreated the same scenario using completely dynamic width and height:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
}

If you want it to be centered, you can do that too:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Demos:

jsFiddle: Centered horizontally only

jsFiddle: Centered both horizontally and vertically

Original credit goes to user aaronk6 for pointing it out to me in this answer

---

Related Topics