Making Horizontally Fixed Div Scroll Vertically With CSS or JS

do you have an example..im having a hard time picturing this

I'm not exactly sure what you're asking, so try this:

div#myDiv {
width:400px; /* sets box dimension */
height:500px; /* sets box dimension */
margin: 0 auto; /* centers horizontally*/
overflow-y: auto; /* uses vertical scrollbar if content exceeds height of 500px */ }

Sorry, I obviously wasn't being as clear as I thought.

Here's my situation.  First, I have a div that has a width of 800 px and a height of 375 px.  Below the div, I have a table whose contents are dynamic: sometimes it's as narrow as 800 px and as tall as 200 px, other times it's way too wide and/or tall to fit in a window.

Currently the CSS attributes of the div are "position: fixed; width: 100%; height: 375px;".  This keeps it centered regardless of whether the table below has caused horizontal scroll bars to appear.  The table has a top tr with a height of 375 px, which stays hidden behind the div and causes the bottom row -- which is the part I need to see -- to remain visible below the div.

The problem with this arrangement is that when the 2nd and bottom row of the table becomes too tall to fit in the window so that vertical scroll bars appear, scrolling down causes the top of the table row to become hidden under the div.

So I have a div and a table.  I can make the table a div, so that there are 2 divs, or change the div into a table; that part doesn't matter to me.  I just want to get them so that the top part -- which is now a div -- remains centered horizontally but will scroll up when the bottom part -- which is a table -- becomes tall enough that the window displays vertical scroll bars.

Trying to describe this has given me a headache, but hopefully my issue is now clear.  Thanks for the help.

Get rid of position:fixed.  That's to fix something to the window, i.e. when you scroll down the div doesn't move.  You clearly don't want that.

Your CSS attributes should be: width: 100%; height: 375px.  However, since you say that the width should be only 800px, you should specify that and use the margin:auto trick to center it.  (width:100% isn't keeping it centered; it's simply expanding it to the edges).  That makes your CSS to be: "width:800px; margin:auto; height:375px".

Try that, and let me know.

Thanks for the help.

Your advice sort of puts me right back to where I started.  The vertical scrolling works just fine now.  But when the table below the div gets wider than the window, causing horizontal scroll bars to appear, scrolling to the right makes the div go left (as we would expect).  What I'm looking to do is make the div stay centered, even when scrolling to the right.

It's possible that what I'm trying to do can't be done.

Here's another way -- hopefully a better way -- of describing what I want.  I'd like the div to be "fixed" horizontally (always centered), but to behave normally when scrolling vertically.  Is it possible?

Thanks very much!

I think I have this solved, but I've run out of time to work on it for the day.  nexusnation, thanks for your help, but please don't spend any more time on it.

I'll post back tomorrow with a more definitive update.