Prevent Horizontal Scrollbar from Appearing in Ove

Question

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 scroll bar only when the browser width is less then the width of boxB. This way, the scroll bar will only appear when the browser width is less then .boxA.

http://imgur.com/yQDFG

The light blue represents the screen. The yellow is a background div, and the aqua is the foreground div where its width exceeds the screen width. In this case, I do not want the scroll bar to appear. I have used overflow-x:hidden but that did not do the trick.

HTML:

<div class="boxA">boxA  
  <div class="boxB">boxB</div>
</div>

CSS:

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

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

Answer 1

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;
 }

Answer 2

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;
}

Answer 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

Answer 4

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

Answer 5

You just need to write

overflow: hidden