Horizontal scroll bar won't go away?

Question

Having trouble with a horizontal scroll bar that pops up.

My page is set up like so:

<html>
<head></head>
<body>

<article>
</article>

</body>
</html>

My css

article {
    width:100%;
    margin:0px auto;
    padding:25px;
}

I'm also using Yahoo's Reset CSS. The trouble is the 100% on Article is giving me a horizontal scroll that I can't get rid of. I want it to stretch the length of the window with just a bit of space on the right and left.

It looks like the article is wider than a parent element. Try setting the body to 100% width and see if that helps. — Alex Morales, Jan 15 '12 at 14:29

score 3 · Accepted Answer · answered Jan 15 '12 at 14:37

3

The width property sets the width of the content, excluding padding, so the total width required by the element is all of the available width plus 2 times 25px.

Omit width: 100% (so that the default width: auto will be used).

answered Jan 15 '12 at 14:37

Jukka K. Korpela

195,524
37
270
390

score 2 · Answer 2 · answered Feb 02 '12 at 17:25

2

This worked for me, I was having the same problem only in Firefox

body {
     overflow-y: auto;
     overflow-x: hidden;
}

answered Feb 02 '12 at 17:25

amandathewebdev

259
5
22

I don't believe you can actually set one to auto and the other to hidden, per https://stackoverflow.com/a/6433475/1449525 – Patrick May 06 '19 at 13:09

score 0 · Answer 3 · answered Jan 15 '12 at 14:29

0

100% Width + 25px padding = container.width+25px. Just add article { overflow-x:hidden } and it should hide it.

answered Jan 15 '12 at 14:29

Andres I Perez

75,075
21
157
138

@JustinM Im not getting a scrollbar on your fiddle, recheck? – Andres I Perez Jan 15 '12 at 14:41
Might only be happening in Chrome. What broswer are you using? – Slick23 Jan 15 '12 at 14:43

Horizontal scroll bar won't go away?

3 Answers3