I cant get my div to center

HTML & CSS
21

yes, but for example, the header is centered just fine, and that image is has large as the footer.

22

On “div#box”, the box with the actual content in it, you set a 835px width and that’s not the same as the footers :wink:

23

i don’t think we’re on the same page here.

ill try to explain as much as I can:
http://cudamine.com/noct/main.html

That is the website, and this is what I see on my 1440x900 res:

If you check te green lines, you can clearly see that my footer is really not centered in. It’s like it doesn’t follow any rule I gave it, but on wider resolutions, it appears just fine.
It wouldn’t be such big problem if the same exact thing WANSN’T happening for the header!

My body has the header image included:

body {
background-color: #000000;
background-image: url(images/mainbg.jpg);
background-position:top;
background-repeat:no-repeat;
}

And this is the footer:

div#footer {
width:1552px;
height:221px;
background:url(images/footer.jpg) no-repeat;
margin-left:auto;
margin-right:auto;
margin-bottom:0;
z-index: 1;
}

Both images are 1552px in width.

24

Hi,

If you set the footer to 1552px then it can’t possibly center in widths of less that 1552px because it will be flush to the left edge.

Just use a 100% width and center the background image (…no-repeat 50% 0 ).

e.g.


div#footer {
   [B] width:100%;
    min-width:835px;[/B]
    height:221px;
    background:url(http://cudamine.com/noct/images/footer.jpg) no-repeat 50% 0;
    z-index: 1;
}

Hiding the horizontal scrollbar on the html element is a very bad move and makes the content inaccessible on screens smaller than 835px.

25

Yay! You fixed it :stuck_out_tongue:

Thanks a lot Paul and Ryan!

One thing on the scrollbar though, I only placed that in so the content doesn’t overflow if the resolution isn’t as big as the images (my case for example), what would you recommend then?

Also, do you have any clue on how to remove the space from the bottom of the footer? I’d like it to be really at the bottom of the page without any space.

26

You lost me there :slight_smile:

You have a fixed width for your content (835px) so you would need overflow on that element if you were going to place bigger images inside. Removing the overflow from the html element does nothing except stop people on smaller monitors from being able to scroll to see the content.

I think you must mean something else :slight_smile:

Also, do you have any clue on how to remove the space from the bottom of the footer? I’d like it to be really at the bottom of the page without any space.

Do you mean the default body margins?

e.g.


html,body {
    margin:0;padding:0
}

Or if you mean on very high monitors where the content doesn’t reach the bottom you would need a sticky footer method.