I am making a website and a horizontal scroll bar shows. Of course, I can use overflow-x
and that will fix all my problems, but I want to know the origin of the issue. Can somebody tell me what makes the scroll bar show up? Here is my CSS:
body {
background-image: url("rain.jpg");
background-repeat: no-repeat;
background-size: 100% 800px;
}
#header {
width: 83%;
height: 70px;
background-color: blue;
border: cyan solid 3px;
border-radius:20px;
position: relative;
top: 20px;
margin: auto;
}
p {
font-size:30px;
font-weight: bold;
color: yellow;
position: relative;
right: -450px;
top: -8px;
}
#container {
position: relative;
width: 83%;
height: 1000px;
top: 50px;
margin: auto;
background-color: blue;
}
.img {
height: 150px;
width: 225px;
padding: 0px;
padding-top: 30px;
cursor: pointer;
opacity: 1;
}
.click {
height: 400px;
width: 600px;
position: relative;
right: -200px;
cursor: pointer;
}
li {
display: inline-block;
}
That makes sense — if you specify a fixed width of 3000px in the CSS, someone at 1920x1080 resolution will only see the left-hand 1920 pixels of the content on the website. On the right side, there is “horizontal overflow,” so you'll see horizontal scrollbars.
Make sure overflow is set to "scroll" not "auto." With that said, in OS X Lion, overflow set to "scroll" behaves more like auto in that scrollbars will still only show when being used. So if any the solutions above don't appear to be working that might be why. You can style it accordingly if you don't like the default.
Go to Settings, Ease of Access, click the “Display” option, Turn off "Automatically Hide Scroll Bars in Windows". It worked for me.
Note that you have your <p>
elements relatively positioned and shifted right with right: -450px
.
With position: relative
the original space for the element is reserved. So while you're shifting the element rightward 450px, its original space in the layout is kept intact, and the document is lengthened horizontally. That's the reason for the scrollbar.
Remove or adjust the right: -450px
rule to see the difference.
Also, simply for contrast, switch relative
with absolute
positioning, which removes the element from the document flow, and the original space is eliminated.
Read more about CSS positioning at MDN.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With