1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Div not horizontally centered on screen when scrolling left and right

Discussion in 'CSS' started by xms, Jun 25, 2016.

  1. #1
    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!
    SEMrush
     
    xms, Jun 25, 2016 IP
    SEMrush
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    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.
     
    PoPSiCLe, Jun 25, 2016 IP
  3. xms

    xms Active Member

    Messages:
    169
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #3
    Thanks. Other ideas?
     
    xms, Jun 25, 2016 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #4
    Yes, explain what you want to do, and we'll explain either how to do it, or why doing it that way is wrong ;)
     
    PoPSiCLe, Jun 25, 2016 IP
  5. xms

    xms Active Member

    Messages:
    169
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #5
    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).
     
    xms, Jun 25, 2016 IP
  6. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #6
    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).
     
    PoPSiCLe, Jun 25, 2016 IP
  7. xms

    xms Active Member

    Messages:
    169
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #7
    This works fine, but when the window gets a horizontal scrollbar and I scroll left or right, the footer is not centered anymore.
     
    xms, Jun 26, 2016 IP
  8. xms

    xms Active Member

    Messages:
    169
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #8
    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):
     
    Last edited: Jun 26, 2016
    xms, Jun 26, 2016 IP
  9. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,408
    Likes Received:
    1,368
    Best Answers:
    24
    Trophy Points:
    400
    #9
    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; ?
     
    qwikad.com, Jun 26, 2016 IP
  10. xms

    xms Active Member

    Messages:
    169
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #10
    In the first div there will be a chart, a very wide one. It cannot be wrapped.
     
    xms, Jun 26, 2016 IP
  11. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,408
    Likes Received:
    1,368
    Best Answers:
    24
    Trophy Points:
    400
    #11
    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".



     
    qwikad.com, Jun 26, 2016 IP
  12. xms

    xms Active Member

    Messages:
    169
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #12
    The chart is for sports. It has to be displayed as it is.
     
    xms, Jun 26, 2016 IP
  13. kk5st

    kk5st Prominent Member

    Messages:
    3,496
    Likes Received:
    377
    Best Answers:
    29
    Trophy Points:
    335
    #13
    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?
     
    kk5st, Jun 26, 2016 IP