I cant get my div to center

HTML & CSS
1

Hello guys, I have the following problem with my website:
http://cudamine.com/noct/main.html

If you look down, the part I’m using as footer just REFUSES to center in the screen… margin left and right auto just doesn’t want to work. I know I probably have pretty “crappy” code, but I would like to know what exactly is stopping this div from getting centered! The “logo” div does exactly what I want, but not the footer one…

CSS:


html { overflow: -moz-scrollbars-vertical !important; }

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

div#logo {
	width:635px;
	height:181px;
	background-image: url(images/noct.png);
	margin-top:80px;
	margin-left:auto;
	margin-right:auto;
	z-index: 1;
}

div#side {
	width:80px;
	height:65px;
	background-image: url(images/side1.png);
	float:left;
}

div#side1 {
	width:80px;
	height:65px;
	background-image: url(images/side2.png);
	margin-top:0px;
	margin-left:1099px;
	margin-right:auto;
	margin-top:-47px;
}

div#youtube {
	width:560px;
	height:340px;
	border: 1px solid #470606;
	position:absolute;
	margin-top:20px;
	margin-left:-280px;
    left:50%;
	z-index: 1;
}

div#bgtube {
	background-image: url(images/bgtube.png);
	width:668px;
	height:440px;
	position:absolute;
	margin-top:-33px;
	margin-left:-334px;
	left:50%;
	z-index: 0;
}

div#entrar {
	background-image: url(images/entrar1.png);
	width:326px;
	height:64px;
	position:absolute;
	margin-top:390px;
	margin-left:-163px;
	left:50%;
	z-index: 0;
}

div#entrar:hover{
    background-image: url(images/entrar.png);
}

div#box {
	width:835px;
	height:800px;
	background-image:url(images/bgbox.jpg);
	background-color:#000;
	background-repeat:no-repeat;
	background-position:bottom;
	border: 1px solid #1f1f1f;
	margin-top:20px;
	margin-left:auto;
	margin-right:auto;
	z-index: 2;
}

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

Giving overflow-x:hidden; will do the same thing AND allow other browsers to get that overflow cut. Right now only mozilla browsers will (since you have the -moz- extension)

3

Yes you should!
Also, it is a good practice IMO to make the whole design fit in a container div that holds in the other divs!
& finally have you tried hidden for overflow-x?

4

Nice, thanks :p.

“background-position:center;” seemed to have helped me as well, but as soon as I turn the width to the right size… boom.

5
Off Topic:

@Ryan, so the legend is true! you answer faster than your shadow :lol:

6

Also, do you guys have a tip for me on how to remove that small black space from the bottom of the footer?

edit:
Just learned from your sig that Dan Schulz passed away, very sad news, Dan helped me greatly in past problems with my websites, RIP my good man.

7

hmm…

well, i just put a border up, and as you can see, it’s not centered… it looks like it doesnt follow my margins.

http://cudamine.com/noct/main.html

8

Why are you using such a wide footer? 1552px?
What resolution / view port are you actually seeing your page with?

9

It is centered :). Lower the width to 500px (just for testing)

Notice it is centered. The width is just so big that it will appear to not be centered but it actually is

I too am wondering why it is so big. My 20 inch monitor barely has it so no scrollbar appears.

10

You’re totally right, I can however answer the width thing, I have the following line to cut on overflow:
html { overflow: -moz-scrollbars-vertical !important; }

This makes it so if the resolution of the user is smaller then the image, it will just be cut, it’s not really important to display the full image (same thing happens in the banner), it’s just a design ‘thing’.

Looks like I’ll have to play with the image more, it just sucks how if I enlarge the image out of my resolution range, it seems off centered… it doesn’t happen with the banner, so weird.

11

Hi, if you put a border around the footer you will see that it is indeed centered. The image may make it seem like it isn’t centered though :slight_smile:

12
Off Topic:

yes Dan passed away few months ago! :frowning: What a loss!

for the black space set the footer height o exactly: 199px (height of the graphic) and remove the background-color (black: #000)!
also I would suggest using background: instead of background-image: , background-repeat etc…

13

I’ve done as you told me, but there is still a space there :frowning: (smaller one), the image is actually 221 px in height too.

14

for me your footer image is 1400px × 199px and did you remove background-color:#000;?

15

Hmm… the one I uploaded and seeing is 1552px × 221px, and yes, the black bg was removed:

div#footer {
width:1552px;
height:221px;
background:url(images/footer.jpg);
background-position:center;
margin-left:auto;
margin-right:auto;
}

16

Yep it is 1552px × 221px for me now too (cleaned the cache)!
recalculate the container height! looks like it is missing ~80px…
also use background:url(images/footer.jpg) no-repeat; that should be enough :slight_smile: remove background-position:center;

17

I don’t quite get what you’re saying, my container is as follows.

div#container {
height:100%;
margin:0;
padding:0;
}

But I’m guessing this isn’t what we’re talking about?

18

Well I didnot look at your #container code when I posted the last message! I just saw that the container wasn’t aligned with the top of the background image… In fact, there’s a margin of 80px on top for the container! (from the logo div)
You should have a header div with a background image (mainbg.jpg) this will embrace the logo too!
then insert the image of the logo in the HTML (noct.png) attribute a class and add the top margin… This a lot better practice.

19

Hey guys, i decided to bum this after a friend of mine showed me his print screen of my website, it is centered. His resolution is 1920x1200 though.

On my resolution for example, 1440x900 it just doesn’t look centered lol.

You can see what I mean here:

As you can see, it’s way off… why does this happen on smaller resolutions but not on larger ones?..

20

Just saw this.

[ot]Stomme Poes suggested I become a ninja because I always ninja a post in before someone :wink:

What do you mean? The content is centered.

The footer doesn’t appear c entered but that is probably because the footer image is so wide, and the screen isn’t wide enough to give it space to even APPEAR centered :slight_smile: