Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Headache trying to center this page on screen

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #162153
    Everton
    Participant

    Hello

    Hopefully, someone can guide me here!

    I have a page here Home page which I don’t seem able to centre, and you could fit the Grand Canyon in between the bottom of the two boxes and the copyright notice, and the copyright notice and the bottom of the screen.

    How would I centre the page, please (at the moment it leans to the left) and narrow those gaps at the bottom?

    Very many thanks.

    Everton

    #162155
    Paulie_D
    Member

    In some cases you are using

    margin: 35px 0 35px 0;
    

    where you should be useing

    margin: 35px auto 35px auto;
    

    or just

    margin: 35px auto;
    

    Plus you have defined px widths on the sidebar & content divs instead of % values.

    #162161
    Everton
    Participant

    Hello Paulie

    Thanks for your reply.

    If I change #banner from

    margin: 35px 0 35px 0; to

    margin: 35px auto 35px auto;

    there is no change.

    Likewise, if I change #main from

    margin: 35px 0 35px 0; to

    margin: 35px auto 35px auto;

    there is also no change. If I change both of them at the same time, I get this:

    Revised page

    You can see how the boxes overlap the main banner image.

    Thanks – I’ll take a look at changing the sidebar & content divs to % values – do you think if I changed back to #banner margin: 35px 0 35px 0; and #main margin: 35px 0 35px 0; and then changed the sidebar and content divs to %, that that may resolve the problem?

    #162162
    Paulie_D
    Member

    If you want elements to center you have to use left & right margins values of auto although they do require the element itself to have defined width value (px or %0 or, at the very least a min-width value.

    For images, you might have to add display:block also.

    You have centered the #outer div on the new page but nothing else is centered within it.

    You seem to have absolutely positioned the menu/logos for some reason instead of, perhaps, putting them in the the right place in the source order of the HTML and using margins/padding to correctly place them.

    #162163
    Everton
    Participant

    Hello Paulie

    Thanks again.

    OK, I can see that there’s a fair amount of work to do there.

    I’ll make a start on it and post back when, I hope, things have been resolved!

    Thanks for all your help.

    #162165
    Paulie_D
    Member

    Here’s a quick version of your top section: http://codepen.io/Paulie-D/pen/DBhEe

    I added the red border so you can see how everything is centered.

    Also, because I used

    * {
      margin: 0;
      padding: 0;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    

    When I specified a width…it means that is the actual width including padding / borders.

    Because of that I have eliminated most, if not all, of the padding declarations which you were using.

    #162170
    Everton
    Participant

    Wow, that’s a useful tool, isn’t it? I have not heard of Code Pen.

    I went back to your original post and used #banner margin: 35px auto 35px auto; I can’t use #main 35px auto 35px auto; because it messes things up.

    However, the banner is now centred! So, thank you for that! I haven’t done anything else yet.

    I would have thought that #main 35px auto 35px auto; would have centred the two main boxes and the fact that it doesn’t means that something else is preventing it.

    I’ll go through your messages again and try to digest what you are suggesting!

    Thanks again.

    #162180
    Everton
    Participant

    Hello Paulie

    It’s looking a bit better now with #main margin: 35px 0 35px 23px;

    Would you know how I may remedy those gaps at the bottom?

    #162631
    Everton
    Participant

    Hello wahhabb

    Many thanks for your post.

    I think I have managed it now.

    Thanks again.

    Everton.

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.