If I have a fixed width .panel div inside a full width .wrap div, styled like so .wrap { width: 100%; overflow: visible; } .panel { width: 780px; height: 100%; overflow: visible; position: relative; margin: 0 auto 0 auto; } Code (markup): Then inside the .panel div i place another element (another div for arguments sake) like so <div class="wrap"> <div class="panel"> [INDENT]<div class="test">test</div>[/INDENT] </div> </div> Code (markup): and style it like so .test { width: 200px; height: 200px; background-color: red; position: absolute; top: 0px; left: -100px; } Code (markup): it behaves as expected, the .test div half 'hangs out' of the parent .wrap, but if i scale the browser window below 780px, horizontal scrollbars appear that allow you to scroll only to the left edge of the .wrap div this is the behaviour i want. but! if i use "right: -100px;" instead, to 'hang' .test outside of .wrap on the right side, for some reason, IE6, IE7 and FFox all create horizontal scrollbars that allow me to scroll to the extremities of .test, and not just to the right edge of .wrap... why is this? and how do i stop it? i want to see the part of .test that is sticking out, but only if the browser window is wider than .wrap's width...if the browser window is smaller, i only want the horizontal scrollbar to allow for scrolling across the width of .wrap i find it strange that it behaves how i want on the left side, but not on the right side. anyone have any advice/info?
Been trying it out here and i think it is just that browsers will always scroll right and down to get all content in... Top and left can get cut off the page as you cant scroll backwards if you know what i mean. You can always scroll the other way. So my conclusion is that what your trying to do is not possible.
Try applying a hidden attribute for overflow of the test div? Hard to say without seeing the page and the source.
I tried overflow:hidden; in my mockup - doesnt make no difference. I'm sure its just a browser thing and in that case, not solvable.
yea i cant seem to work out how to stop this - i kinda get why its happening, but yea i just wish there was some way to stop it all i want to do is be able absolutely position elements outside a parent wich has a fixed width, and simply have the browser ignore the outside elements when it comes to scrolling is there any possible CSS i can apply to an element to do that?
See my above post - it is possible if absolute positioned element if off the top or left hand side of the page. To do it to the bottom or right is not possible.
Maybe it'd help if you told us what you were trying to achieve as in end design. Do you have a image mock up? I'm sure there would be another way.
im writing a javascript function that finds any element with a certain class, then appends 8 spans into the element, 4 containing tiling background images that are absolutely positioned top, left, right and bottom, and 4 that contain no-repeat corner images that are absolutely positioned, surprisingly enough, in the corners which all works perfectly already, all i need to do to apply a photoshop style border to anything is to add "setBorder" to its class like i said, it works fine already, the only problem is i am of course using negative absolute positioning to place the borders just outside the parent element, and this stupidly makes scrollbars appear, but only the right and bottom sides... all im thinking is - something must be telling the browser not to create scrollbars if an absolutely positioned child falls outside the left or top - so what property(s) is it - and how can i control it someone must know i mean, people did write the browsers themselves, i just hope someone who knows about this particular behaviour can help
tried both - bottom line is - as soon as an element falls outside of its parent on the right or bottom, it cause the problem...
Essentially the absolute positioned element wants to be able to go past div.panel but not div.wrap. This is the way i think it could work... Change div.panel to overflow:hidden; - Now anything bigger than div.panel width would get 'chopped' off. However the width is 100%. That needs to change and be px not % if div.test is absolute postioned right. If div.test is absolute postioned right at -100px you want to find size of position div.panel in the browser on the fly and set it (976px for example) and then position it -100px left so the first 100px of it will be hidden of the left hand side of the page. Whether that can be done or not, i have not researched.
You should still probably use negative margins rather than absolute positioning anyway. That's what they were designed for. If you'd still rather use positioning, how come you're not using relative for this? You can still position it using a precise amount of pixels, but it will also be relative to it's actual position in the markup, so it seems like you can achieve the same thing with a little more consideration to flow control issues. Just a thought. Haven't seen the code. Also, I didn't notice, but have you tried max-width techniques on the container?
edit: margins isnt an option really for this particular thing - cause this code can be applied to any element, taking into account the parent elements padding for instance, margins would work from where the child element naturally sits, whereas absolute, top - that works from the parents top relative positioning is also not a plausible option, since im trying to position child elements in relation to their parent's box - not their normal position in the document flow... max-width techniques - ill give that a look, but im pretty sure the container itself stays the same width wether or not the children spill out of it? the only reason i can see the children is cause i have overflow: visible on the parent... edit: nope - max width doesnt help cause the container does indeed stay at its specified width even when the children fall outside it because of negative positioning. thanks guys for your involvement so far, hopefully i can sort this out... im pretty sure if there is any CSS property(s) that will fix this, they probably will need to be applied to the children elements more than anything so the browser ignores them when it comes to scrolling...