Prevent Horizontal Scrollbar From Appearing In Overflowing Div

I am trying to prevent the scroll bar from appearing when the div .boxB overflows and I am unsure why my code is not working. In other words, I am trying to remove the horizontal

Solution 1:

May be, overflow-x: hidden; must be uses for .boxA?

Solution 2:

You just need to write

overflow: hidden

Solution 3:

Try this css:

.boxA {
    background: yellow;
    width: 800px;
    height: 600px;
    overflow-x: hidden;
}

.boxB {
    background: aqua;
    width: 1000px;
    height: 400px;

}

overflow must be on a tag which wraps too large content (in your case - boxA wraps boxB). So, if you do not want something to go outside wrapper - you must put overflow on wrapper

Solution 4:

In your HTML code, boxeA is the parent and Box B is the child.

CSS property overflow used like this :

.boxeA
 {
     overflow: hidden;
 }

will prevent a part of the boxeB (which is the child of boxeA) to be displayed when it is more bigger than it's own parent.

boxeA is like a mask on boxeB.

in the url you have given, to prevent the aqua boxe to be entirly displayed, you have to put the aqua boxe as a child of the light blue one, and give the light blue box a css property like this :

.light_blue
 {
     overflow: hidden;
 }

Solution 5:

Now that I understand what you want, here is a possible solution:

http://jsfiddle.net/dy8g5/3/

Parameters:

1. .boxB must be visible outside of .boxA, with no horizontal scrollbar.

2. The browser should not have a horizontal scrollbar, if the browser width is smaller than the width of .boxB

The solution was to use a media query to hide the horizontal scrollbar, IF the browser width is smaller than the width of .boxB

@media all and (max-width: 1001px) {
  body {
    overflow-x: hidden;
  }
}

@media all and (max-width: 801px) {
  body {
    overflow-x: visible;
  }
}

.boxA {
    background: yellow;
    width: 800px;
    height: 600px;
}

.boxB {
    background: aqua;
    width: 1000px;
    height: 400px;
    overflow-x: hidden;
}