Menu
The problem is:
I have a full width bar menu, which is made by creating a big margin on the right and to the left. This margin should be cropped by overflow-x: hidden, and it is... no scroll bars, everything (visually) is ok...
But, if you drag the page (using Mac Lion) or scroll to the right, the page shows an enormous bar, which should have been cropped by the overflow-x:hidden.
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; } Here is a link: http://jsfiddle.net/NicosKaralis/PcLed/1/
You have to open in draft to see... the jsfiddle css somehow makes it work.
i have and structure like this:
body div#container div#menu_bar div#links div#full_bar div#content_body ... the #container is an centered div and has fixed width of 950px, the #full_bar is an bar that extends on the entire window, from one side to the other
if i put width 100% in #full_bar it will get only the inside width and not the width off the window
913
To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML.
The overflow-x property in CSS specifies whether to add a scroll bar, clip the content or display overflow content of a block-level element, when it overflows at the left and right edges. In other words, this property helps us to display the content which is overflowing from the page horizontally.
It is because you are using position absolute. You cannot use position absolute with overflow hidden, because position absolute moves the targeted element out of context with the document structure.
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.
I had this exact same problem. I solved it by putting overflow-x: hidden; on both the body and html.
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>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
