[Solved] Headache trying to center this page on screen

[Everton]

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

[Paulie_D]

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.

[Everton]

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?

[Paulie_D]

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.

[Everton]

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.

[Paulie_D]

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.

[Everton]

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.

[Everton]

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?

[Everton]

Hello wahhabb

Many thanks for your post.

I think I have managed it now.

Thanks again.

Everton.

[Author]

Posts