Horizontal Scrolling for CSS with Full Width

Feedback

Question:

Upon completing the website, I noticed an additional scroll appearing upon loading.

Can you provide me with an explanation and potential solutions for addressing this problem?

Although I am able to share the code in this forum, it seems that those who have asked similar questions in the past prefer to have a functional sample provided.


Solution 1:

In the footer, the
NAV element
had a negative right margin resulting in a
horizontal overflow
and consequently, the appearance of
scroll-bar
. Perhaps, the goal was to shift the nav-items towards the right.

Eliminating the scroll-bar involves setting the NAV’s width to the correct value and removing the negative margin.


Solution 2:


Attempt to incorporate the subsequent sentence into your wrapper.

overflow-x: hidden;


Solution 3:


Consider incorporating
css property
into the designated

<div id="wrapper">

component.

overflow-x: hidden;

Follow the provided link to access the official documentation on the overflow-x attribute.

Your CSS code should resemble the following format.

#wrapper {
     width: 100%;
     height: 100%;
     min-height: 100%;
     position: absolute;
     overflow-x: hidden;
}

It works flawlessly on a Mac Os in Safari (version 5.1.7), Firefox (11.x), and Google Chrome (19.x) after testing.

Hope it helps!

Frequently Asked Questions

Posted in Css