Avatar of Jonathan Greenberg
Jonathan GreenbergFlag for United States of America asked on

Making Horizontally Fixed Div Scroll Vertically With CSS or JS

Is there any way to effect a div -- with CSS, JavaScript or any other method -- such that it will remain horizontally centered in a browser window regardless of horizontal scrolling but scroll vertically when content below causes vertical scroll bars to appear?
CSSJavaScriptHTML

Avatar of undefined
Last Comment
Jonathan Greenberg

8/22/2022 - Mon
Robb Hill

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

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 */ }
ASKER
Jonathan Greenberg

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.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
nexusnation

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.
ASKER
Jonathan Greenberg

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?
SOLUTION
nexusnation

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
Jonathan Greenberg

Thanks very much!
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
Jonathan Greenberg

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.
ASKER CERTIFIED SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.