H-Scroll to ignore this DIV

[8PDesign]

hi,

I need some div to "bleed" on the side of the page.
But I don't want the browser main Horizontal scroll bar to appear when the div does not fit in the browser window.

........................
.                      .
.                      .
.                  .........
.                  .       .
.                  .........
.                      .
.                      .
........................

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<div id="A" style="width:1000px; height:3000px; border:1px solid black;">
 <div id="B" style="width:200px; height:100px; border:1px solid red; position:absolute; top:200px; left: 850px;"></div> 
</div> 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

-If I set the position of B to fixed, the H scrollbar disappears (Great), but the div does not scroll up anymore when I scroll down the page. As expected by fixed.

-If I set the position of B to absolute, the H scroll bar appears when the browser window is smaller than 1000px. :(

I'd like the HORIZONTAL scroll bar to ignore this div.

Is there any way out of this?
thanks!

[D_Blackwell]

Would this work for what you want? It should remove the horizontal scrollbar completely, but not affect vertical scrolling.

<style type="text/css" media="screen">
html {
overflow-x: hidden;
}
</style>

[8PDesign]

thanks, but the H scroll is still useful for the rest of the content. Any other idea? :)

thanks again!

[rocknbil]

Put the one you want overflow on inside a "main div" like

________________________ 
-..... no overflow.....- 
-......................- 
-.................---------------- 
-.................---------------- 
-.................---------------- 
-.................---------------- 
-......................- 
________________________ 
_rest of scrollable_ 
________________________ 
________________________ 

[8PDesign]

thanks for your reply. But I can't get it to work...
Is this what you meant?

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<style type="text/css" media="screen">
#nooverflow, #B {overflow-x: hidden; }
#content {overflow-x: auto;}
</style>

<div id="nooverflow">
<div id="B" style="width:300px; height:100px; border:1px solid red; position:absolute; top:200px; left: 850px; "></div>
</div>

<div id="content" style="width:1000px; height:3000px; border:1px solid black;"></div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

thanks!

[8PDesign]

hi, Does it work on your side?! thanks!