Page extends past edge of screen

Question

This is the second time I have run into this issue and I am about to pull my hair trying to fix it. I am creating a website and just getting on the beginnings of it. In the css I set the margins and the padding for the html and body tags to 0 and the page extends past the right edge of the screen.

I tried modifying the css for these elements to include a 100% width, but the horizontal scroll bar is still there and the page is still past the edge of the screen.

I also tried setting the overflow value to hidden, but just as expected, that only took away the scroll bar. It was obvious the page was still extended past the right edge of the screen.

Any thoughts?

I was viewing it in Internet Explorer 9 with a resolution of 1600x900. — The Duke Of Marshall שלום, Nov 22 '12 at 00:55
I believe the answer you got from sachleen below is correct--watch the padding. — SAJ14SAJ, Nov 22 '12 at 00:57
Yes, once I figured out he was talking about the width with the navigation `div` and I took that out, it did the trick. Thanks for your help too. — The Duke Of Marshall שלום, Nov 22 '12 at 01:00

score 5 · Answer 1 · answered Nov 22 '12 at 00:53

5

You have a padding in addition to the 100% width.

enter image description here

Div elements take up all the horizontal space available so you don't really need the width property here. Taking it out would fix the issue. Additionally, you can change the box-sizing property of the element

box-sizing: border-box;

answered Nov 22 '12 at 00:53

sachleen

30,730
8
78
73

Well, my current CSS is as such html, body { margin: 0px; padding: 0px; } This is what's giving me the issue. – The Duke Of Marshall שלום Nov 22 '12 at 00:57
Ok, now I'm tracking. I took the width out of the navigation `div` and that solved it. Thanks! – The Duke Of Marshall שלום Nov 22 '12 at 00:59
box-sizing is css3 -- hopefully you don't have to support IE 6. – SAJ14SAJ Nov 22 '12 at 00:59
I support IE 6 for an additional, and large, fee. – The Duke Of Marshall שלום Nov 22 '12 at 01:01

score 3 · Accepted Answer · answered Nov 22 '12 at 00:55

3

just remove the width:100% on the navigation_bar div

answered Nov 22 '12 at 00:55

kennypu

5,950
2
22
28

Thanks for your help. That took care of it – The Duke Of Marshall שלום Nov 22 '12 at 01:02

Mike Brant · Answer 3 · 2017-09-18T20:43:22.397

This is your problem:

#navigation_bar {
    background-color:#900;
    height:50px;
    left:0px;
    padding-right:10px;
    text-align:right;
    top:0px;
    width:100%;
    z-index:0;
}

You have padding on a 100% width element, that extends the full width of the body. Remove the padding and your #navigation_bar element will fit without scroll. Alternatively, just remove width: 100% as the div will naturally grow to fill up as much horizontal space as it's container (in this case body) will allow.

By the way, it would have been helpful to put the section of HTML and CSS in your question so as to not make people dig through your site to get it.

I'll have to remember that next time. Thanks for the tip and sorry for the trouble. — The Duke Of Marshall שלום, Nov 22 '12 at 01:03

score 1 · Answer 4 · answered Mar 03 '22 at 01:05

Same problem different cause when using viewport width.

What is the viewport?

The browser's viewport is the area of the window in which web content can be seen.

It also includes the scrollbar!

So when you use viewport width on the body tag, keep in mind that 100vw > 100%, because the width of the scrollbar is included in the viewport unlike when using percent.

body{
    width: 100%;
    /* Page does not extend. */
    
    width: 100vw;
    /* Page extends in width by the width of the scrollbar. */
}

Page extends past edge of screen

4 Answers4

Linked