I have a simple HTML page with CSS code. I hope you will get the point. When I resize the window (from bigger to smaller) and scroll the page left and right, the text "This is working OK" stays on its position. It is fixed and works fine. But the text "This is not working OK" will not be centered, if I scroll the page left and right. That's the main problem. This div should always, even after scrolling the page left and right, be horizontally centered and on the bottom of the page - not on the bottom of the screen. <div style="width: 1050px; top: 0; left: 50%; margin-left: -525px; position: fixed; z-index: 10;"> This is working OK </div> <div style="white-space: nowrap; margin-left: auto; margin-right: auto; margin-top: 150px; overflow: visible;"> Here is text which is so long that a horizontal scrollbar will be needed for the browser window </div> <div style="clear: both; position: relative; overflow: hidden; width: 1050px; margin-left: auto; margin-right: auto;"> <div style="position: relative; clear: both;"> <div style="clear: both; width: auto; margin-left: 30px; margin-right: 30px;"> This is not working OK </div> </div> </div> HTML: Thanks for your help!
I would suggest you rethink how you do this, since your way of thinking is completely wrong. Why do you need these items to be fixed (in width and size)? Let them adjust to the size of the viewport, so as to work properly regardless of screen size. Also, why do have all that clear: both; on all the divs? They serve no purpose.
Yes, explain what you want to do, and we'll explain either how to do it, or why doing it that way is wrong
I would like to make a non fixed height footer (width exactly 1050px) which is horizontally centered and on the end of page (not on the bottom of the screen).
Okay. Why exactly 1050px? Are you sure people will always view this on a full-HD screen? If you want a footer on the bottom of the content, just put a <div> after the content and set the content to a min-height (if applicable), or just let the flow take care of what you need. But you shouldn't make a set width. https://jsfiddle.net/07uwc3r6/ (drag the line on "javascript" to the left to see the content / footer in action).
This works fine, but when the window gets a horizontal scrollbar and I scroll left or right, the footer is not centered anymore.
Here is an example. This is OK: <div style="border: 1px solid blue; white-space: nowrap;"> <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> </div> <div style="width: 1050px; border: 1px solid red; left: 50%; margin-left: -525px; position: fixed; text-align: center;"> This is the footer </div> HTML: But when there is more text and the footer gets out of the screen, it disappears. How could I fix this? <div style="border: 1px solid blue; white-space: nowrap;"> <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> <p>The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here. The content goes here. Whatever I want to display on the page itself gets put here.</p> </div> <div style="width: 1050px; border: 1px solid red; left: 50%; margin-left: -525px; position: fixed; text-align: center;"> This is the footer </div> Code (markup):
1. What makes that text to go on without breaking is white-space: nowrap; Just remove it and your text will be "folding" just fine. Otherwise it will keep pushing everything off the screen as you add more text. 2. Why not use width: auto; max-width: 1050px; or width: 100%; max-width: 1050px; instead of width: 1050px;? That way you will have your width set at 1050px yet the div will be fluid. What I don't get is why is the content in your first div is almost out of sight (seems like it should be) with these two set to where they are: left: 50%; margin-left: -525px; ?
But who does that? That's the most user UN-friendly thing you can do. Your chart has to be the same width as the rest of the content or at least the same width as the screen. That's why it's been suggested to make it all responsive, so that your chart and everything else would adjust to a screen's width. If you chart is an image you can do something like this to make it responsive: .my_chart { width: 100%; height: auto; background-image: url('my_chart.png'); background-repeat: no-repeat; border: 1px solid #ccc; } Code (markup): If your chart is text, remove width: 1050px; top: 0; left: 50%; margin-left: -525px; position: fixed; and instead have it in relative position and give it the same width dimensions as I suggested there: width: 100%; max-width: 1050px; I agree with @PoPSiCLe "I would suggest you rethink how you do this".
Then, if the page is too small to show the chart full size, add a link to the full size image. Then you can have a humongous chart without screwing up the page. Have you never noticed image galleries that link to the full sized images?