css-position

I have an absolute positioned div inside another absolute positioned div. The child div content is much bigger than the parent can contain. This is by design. I need the child div to spill out of its parent. It does so in every other browser except IE 8 (IE 7 looks OK, not sure) In IE8 the part of the child that is out of parent is clipped. It is there, but just not visible as can be verified by IE developer tools. I tried z-index, tried explicitly setting overflow:visible, no luck at all. UPDATE: I found out that the problem is caused by a filter defined in the parent div like this: -ms

Is it possible to tell the code to position by the center point of an element, rather than by the top-left point? If my parent element has width: 500px; and my child element has /*some width, for this example let's say it's 200px*/ position: absolute; left: 50%; one would assume that based on the 50% positioning, the child element will be in the middle of the parent, leaving 150px of free space on each side. However, it is not, since it is the top-left point of the child that goes to 50% of the parent's width, therefore the whole child's width of 200px goes to the right from there, leaving

I have a container box1 that has a certain width (which might change depending on its content). That box contains box2 which has a fixed width (it could be an icon). Next to box2 , I have box3 with some text. I want the text to use all the space available to the right of box2 . With the HTML pasted below, you get: So far so good. If the text gets longer, it doesn't wrap around box2 (which is what I want), however, it doesn't make box1 grow, which is my problem. You'll tell me "hey, if you made box3 a position: absolute , how could you expect it to make box1 grow?". Well, I don't but then, how

I am trying to create a very simple effect where the navigation sticks to the top of the page as you scroll down the page. All I should have to do is set "position: fixed" to the header, which I currently have. For some reason, it's treating it more like a "position: absolute" element vs. fixed. I tried it on other elements on the page with the same effect, so I must have something that in my HTML or CSS code that is causing the issue. Any ideas? http://jsfiddle.net/apautler/yDhXG/1/embedded/result/ Header CSS .nav-main {overflow: visible; position: fixed; top: 0; left: 0; right: 0; height:

There's an issue when accessing my website (http://www.zero11arquitetura.com.br) on iPad or iPhone with iOS 5 that I can´t fix. When window is scrolled thru code every position:fixed elements click event stop working. Can you please help me ? This site structure uses a top menu div and a header div with position: fixed css. When user clicks on a menu item window scrolls horizontally until it reaches its target. Clicking in the menu item is done by jQuery click method on each img tag and scrolling is done by jQuery animate method ($("html:not(:animated),body").animate({ scrollLeft: varDestino }