CODEWITHSUNDEEP
htmlcss
The Duke Of Marshall שלום
The Duke Of Marshall שלום

Reputation: 1659

Page extends past edge of screen

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?

Upvotes: 3

Views: 20776

Answers (4)

corken
corken

Reputation: 19

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. */
}

Upvotes: 1

Mike Brant
Mike Brant

Reputation: 71384

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.

Upvotes: 1

kennypu
kennypu

Reputation: 6051

just remove the width:100% on the navigation_bar div

Upvotes: 3

sachleen
sachleen

Reputation: 31131

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;

Upvotes: 5

Related Questions