CSS background image larger than window buggy

I have a weird issue that's probably more of a bad coding than anythin开发者_开发问答g else.

Basically, I have this site where if you resize your browser just around the size of the website, you will see that you can scroll right. This is because I have a <div> with the position: absolute on the right side of the site with a width and height that seems to "push" the website outside of the window and if you scroll, you'll see that the top part of the site don't respect my width:100%.

If you understand my explanation, could you tell me what is the right way to code this?

Add the overflow-x: hidden; to the body id in css

it's a good way to hide that scroll bar and keep those images aside. your body css will look like this

body{
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    margin:0;
    padding:0;
    background-image: url(images/bckpattern.gif);
    background-repeat: repeat;
    overflow-x: hidden;
}

Some defintiion Viewport= the rectangle of the browser that is showing the page

The reason why your top part "doesnt respect" the width:100%, is because when you absolute position an element its completly removed from the flow. That means that there is no way for div#bcktop to know that there is more content to the right.

When you say "width:100%" on an element whose parent is body, you are saying "Set the width equal to the viewport's"

The answer by rmagnum2002 is the dirty but quick way to fix your problem, as its just hiding the issue. And, what about users who have smaller screens? they wont be able to use that area of the page (im assuming sbi_right will fulfill some use in the future)

Instead, i recomend the following fix Set the property min-width on your horizontal bars so that when the user resizes its browser (or when their screen isnt big enough), those bars will still hold up the entire page.

Here is an example:

<div id="annoncetop" style="min-width:MAX_WIDTH_OF_PAGE_CONTENT">