Disabling horizontal overflow with "overflow-x:hidden" may not always

Can someone help me with this issue?

I'm trying to create a full-width bar menu by setting a large margin on the right and left. I've used overflow-x: hidden to hide the excess margin, and visually everything looks fine with no scroll bars.

However, when I drag the page (using Mac Lion) or scroll to the right, an enormous bar appears that should have been cropped by the overflow-x:hidden.

CSS

html {
  margin:0;
  padding:0;
  overflow-x:hidden;
}
body {
  margin: 0 auto;
  width: 950px;
}

.full, .f_right {
  margin-right: -3000px !important;
  padding-right: 3000px !important;
}

.full, .f_left {
  margin-left: -3000px !important;
  padding-left: 3000px !important;
}

For reference, here is a link to my code: http://jsfiddle.net/NicosKaralis/PcLed/1/

If you open it in draft mode, the jsfiddle CSS seems to somehow resolve the issue.

@Krazer

My HTML structure looks like this:

body
  div#container
    div#menu_bar
      div#links
      div#full_bar
    div#content_body
    ...

The #container is a centered div with a fixed width of 950px, and the #full_bar is a bar that should span the entire window width.

When I set the width of #full_bar to 100%, it only takes the inner width and not the full window width.

htmlcssoverflow

Answer №1

I encountered a similar issue, but I managed to resolve it by applying the overflow-x: hidden; property to both the body and html elements.

html, body {
  margin: 0 auto;
  overflow-x: hidden;
}

html{
  padding: 0;
}

body {
  width: 950px;
}

.full {
  background: red;
  color: white;
  margin-right: -3000px !important;
  margin-left: -3000px !important;
  padding-right: 3000px !important;
  padding-left: 3000px !important;
}
<div>
  <div class="full">
    abc
  </div>
</div>

Answer №2

If you're facing a similar issue, try this quick fix with just one line of code:

body {
    /* Make sure to keep all your regular code and add position: relative; */
    position:relative;
}

This trick worked for me on webkit (Mac).

For more information, check out this link.

Answer №3

html, body {
    overflow-x: hidden;
    width: 100%;
}

The problem was successfully resolved for me, although it still persists in IE - the site can still be dragged to the right with some effort.

By using overflow: hidden;, the vertical scrollbar is removed, but this workaround is not ideal.

I couldn't come up with a more effective solution using JavaScript.

Answer №4

The solution I discovered can be found here

It is necessary to enclose your content with a #wrapper. Using overflow:hidden on the body element will not achieve the desired effect.

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

Below is the HTML code snippet:

<html>
  <head>
    <title></title>
  </head>
  <body>
    <div id="wrapper">
      <div class="yourContent"> ... </div>
    </div>
  </body>
</html>

Answer №5

Preventing scrolling of an element without the use of JavaScript seems unlikely. However, with JS, you can easily set scrollLeft to 0 when onscroll event occurs.

Answer №6

Check out this awesome Offcanvas example from Weaver at

To contain content, use the following CSS:

width: 100%; 
overflow: hidden;

This CSS helps to restrict width and has proven effective in similar situations by preventing scrolling during dragging.

Answer №7

Experiment with using the fixed position for an HTML element, but keep in mind that this will prevent scrolling in both directions.

html {
    position: fixed;
}

Answer №8

What if we adjust the width of the content body and encase the #container with the #menu_bar and #content_body inside?

body
    div#container 
       div#menu_bar (positioned absolutely)
          div#links
          div#full_bar
       div#content_body (positioned relatively + padding [#menu_bar height])
          ...

Check out this CSS example for reference.

Answer №9

It's recommended to utilize max-width in your HTML code.

Please let me know if you encounter any issues with this suggestion.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Arrange two icons side by side on the same line

How can I align two icons inside the "col" class in a horizontal line rather than stacked on top of each other? Additionally, I want to reorder them using the bootstrap "order" class. Can someone please assist me with this? I've attempted wrapping th ...

htmlcssbootstrap-4

Is there a way to make my item reach a height of 100%?

I've created a unique Wordpress theme and I'm looking to make an element 100% height to fill the remaining available space. Here is the HTML code snippet: <header id="masthead" class="navbar navbar-default" role="banner" style=" backgrou ...

htmlcsstwitter-bootstrap

What is the best method to shift the middle div to the top of the CSS layout?

My goal is to create a responsive web page with three divs arranged in one column for small screens and two columns for larger ones. However, the layout doesn't look quite right unless the middle div is moved to the top like this: https://i.sstatic.n ...

cssbootstrap-4

Looking to retrieve the checkbox value from HTML in AngularJS and pass it to the controller

How can I retrieve the value of a checkbox on button submit in a controller Function? <input id="Check" type="checkbox" ng-model="CheckValue" /> ...

javascriptjqueryhtmlangularjs

What is the method for displaying an array in JavaScript?

When a user clicks the value 3 input box, three input boxes will appear where they can enter values. However, when trying to submit the array, no elements are printed and an error message "Element is not defined" appears. var arr = [0]; function get_va ...

javascripthtml

When openui5 converts XML, the class property is not included in the HTML output

I have included the "footerAlarms" value in the XML view, but when I check the HTML version in the browser, it is not showing up. How can I make sure that the class footerAlarms appears in the HTML view? <footer class="footerAlarms"> < ...

htmlcssxmlsapui5footer

I'm curious, what exactly does "ideal size" refer to in the CSS spec level 3?

Lately, I have been immersing myself in CSS educational resources and delving into the CSS spec. The concept of "ideal size" has caught my attention a few times. I'm not sure if it's a strictly technical term or more informal. Check out the CSS ...

cssflexboxcss-grid

Clicking the responsive menu does not reveal the hidden overlay div as expected

Struggling with finding the correct function to open the hidden div of my responsive menu on my new website. Check out my code: https://codepen.io/anon/pen/XRJRGE <a class="page-head__menu" id="js-menu" href="#" onClick="open()">Menu< ...

javascriptjqueryhtmlcss

Creating a dynamic container with a square element and text inside: Steps to achieve a responsive design

In the code below, I am creating a responsive 'rectangle' and 'square', along with making the text inside the p tag responsive. #rectangle { display: flex; width: 500px; height: 150px; background-color: brown; } ...

htmlcss

What is the best way to stop a UL element from inheriting the height properties of a drop down menu?

My sticky navigation bar is almost finished in terms of appearance and functionality. However, I encountered an issue when adding a drop-down menu within the links – it creates an invisible field that hides nearby text. Upon investigation, I found that t ...

javascriptjqueryhtmlcssdrop-down-menu

Is it possible to implement a feature in Angular and Bootstrap where the toggle menu can be closed by clicking anywhere on the page, rather than just the toggle button

I'm working on an Angular project where I've implemented a navbar component. The navbar is responsive and includes a toggle button that appears when the browser window is resized. This button allows users to hide or display the menus. One issue ...

htmlcssangulartypescriptbootstrap-4

Looking to minimize the amount of HTML code in Angularjs by utilizing ng-repeat

Working with some HTML <tr class="matrix_row" ng-repeat="process in matrixCtrl.processes | filter : { park: parentIndex } track by $index"> <td class="properties" ng-click="dashboardCtrl.currParam=0; dashboardCtrl.currentProcess=process"> ...

javascripthtmlangularjsangularjs-ng-repeat

Develop a Greasemonkey userscript that eliminates specific HTML lines upon detection

I am attempting to create a Grease Monkey script that can eliminate specific lines in HTML code. For example, consider the following: <ul class="actionList" id="actionList" style="height: 158px;"> <li class="actionListItem minion minion-0 fi ...

javascriptjqueryhtml

What is the best way to align an element at the bottom in order to allow it to grow vertically

I have a unique structure on one of my pages that I want to use for a tooltip style behavior. When the "container" element is clicked, the "child" element, which is initially hidden, should appear above the container. However, since the child's height ...

htmlcsspositionalignment

Switch off any other currently open divs

I'm currently exploring a way to automatically close other div's when I expand one. Check out my code snippet below: $( document ).ready(function() { $( ".faq-question" ).click(function() { $(this).toggleClass('open'); $(this ...

javascriptjqueryhtmlcss

Adjust words to fit any screen size as needed

Looking for a small program that can dynamically change a word within an SVG? The goal is to create an effect where regardless of the word or group of words, they always stretch along the entire height (due to a 90-degree rotation) by adjusting the font si ...

javascripthtmlsvg

Jquery function for determining height across multiple browsers

I am currently facing an issue with setting the height of table cells in my project. While everything works smoothly on most browsers, Firefox seems to add borders to the overall height which is causing inconsistency across different browsers. If anyone k ...

javascriptjquerycss

Learn how to extract data located between two specific tags using Java HtmlUnit

<span> <a></a> Hello <div>A plethora of irrelevant text</div> </span> My goal is to retrieve only the "Hello" from the webpage. While I can use XPath to target the span, calling .getTextContent() also includes the text ...

javahtmlhtmlunit

Is it possible to determine if the selected/clicked element is a multiple of "n" using jQuery?

If I have 'n' li elements within a ul, I am looking to trigger an alert message only when the li item that is selected or clicked on is a multiple of "n" (for example 3). In this scenario, the alert should only appear if I click on the 3rd, 6th, ...

javascriptjqueryhtmlcss-selectorsjquery-selectors

When a single piece of content is exposed, it has the power to bring down all

I've been working with some code where clicking on a specific button toggles the visibility of certain contents. It's functionality is satisfactory, but I want to take it a step further. In addition to showing and hiding content, I also want to e ...

javascripthtmlcss