Rob in hood Posted September 15, 2009 Report Share Posted September 15, 2009 Header Section Footer Section Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted September 15, 2009 Report Share Posted September 15, 2009 You can give the container overflow hidden. Or, even if you AP the image that would still probably trigger the scrollbar. However, if you position fixed it, it would not (probabably). Quote Link to comment Share on other sites More sharing options...
virtual Posted September 15, 2009 Report Share Posted September 15, 2009 Maybe I'm missing something, but why don't you just resize the image to fit the sidebar? Quote Link to comment Share on other sites More sharing options...
Rob in hood Posted September 15, 2009 Author Report Share Posted September 15, 2009 (edited) I actually want the image to overflow the div. I want the overflow to get cut off by the browser window, instead of making scrollbars to show the rest of the image. The reason for this approach is so that the browser cuts off equally from both sides of the border for smaller screen resolutions. If I used fixed width border divs, then for small screen resolutions the border divs will make the browser have horizontal scrollbars. The alternate I know to this way is to make a big background image with both border pictures, and a big blank area in the middle, and set that image as the background image. But this makes the image unnecessarily large, just for the big blank area in the middle, seperating the border images. Position:fixed did stop it from making scrollbars, but I want the image to scroll, not be fixed Edited September 15, 2009 by Rob in hood Quote Link to comment Share on other sites More sharing options...
Rob in hood Posted September 15, 2009 Author Report Share Posted September 15, 2009 I realised I should maybe post the CSS code. @charset "UTF-8"; /* CSS Document */ body { background: #1b1b1b url(images/bodytile.png) center repeat-y; margin: 0px; padding: 0px; } #container { width: 1010px; margin: 0 auto; } #header { background: #1b1b1b url(images/headertile.png) top repeat-x; height: 167px; } #leftcol { background: #1b1b1b url(images/bgleft.png) top right no-repeat; float: left; width: 5px; height: 500px; } #rightcol { background: #1b1b1b url(images/bgright.png) top left no-repeat; float: right; width: 5px; height: 500px; } #content { background: #e9e9e9; float: left; width: 1000px; height: 1200px; } #footer { background: #1b1b1b url(images/footer.png) bottom center no-repeat; clear: both; height: 97px; } Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted September 15, 2009 Report Share Posted September 15, 2009 body overflow-x: hidden should do what you want in all but opera I think. Quote Link to comment Share on other sites More sharing options...
Rob in hood Posted September 15, 2009 Author Report Share Posted September 15, 2009 body overflow-x: hidden should do what you want in all but opera I think. Sweet, thanks Eric! You're a legend! You deserve some deliciously brewed coffee. :cool: Is there a better way to achieve this that is more compatible? Apart from that big background image method. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted September 15, 2009 Report Share Posted September 15, 2009 (edited) Your welcome. Double check that Opera isn't defaulting to just body overflow hidden (without the X). As that would hide any vertical scroll. Actually, in order to fix that little issue, say overflow-x hidden and overflow-y auto in that order. As long as Opera is still happy, that's probably going to be the easiest fix. There is also some opera only js you can track down. But that's not a clean fix. No scrollbar and doing what you want is not a very easy task. There was a quiz not to long ago here... http://www.sitepoint.com/forums/showthread.php?t=618512 on this very same problem. (AKA quiz #1 in that link). Navigate to page #2 and you'll see a couple alternative fixes. As you will tell, it's a little more involved. Edited September 15, 2009 by Eric Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.