How Can I Centre a Div?

Forum Moderators: open

Message Too Old, No Replies

How Can I Centre a Div?

centring div's

olls

7:53 pm on Feb 16, 2011 (gmt 0)

I am stuck trying to centre some

<div>

. I have tried loads of methods on-line and none of them work. The site is [url]scout-resources.hostoi.com[/url], I want to centre the all the div's.

At the moment I'm using this:

div#header{
background:url(topbackground%20pic.png);
position:absolute;
top:10px;
width:820px;
height:412px;
z-index:100;
margin:0;
padding:0;

Please help! I'm stuck!

olls

SevenCubed

8:26 pm on Feb 16, 2011 (gmt 0)

Hi olls and welcome to Webmaster World

Short quick solution:

div#header{
background:url(topbackground%20pic.png);
position:absolute; <------ Remove
top:10px;
width:820px;
height:412px;
z-index:100;
margin:0 auto 0; <------ Change
padding:0;
} <----- Add

That will resolve your immediate problem but might create others because I don't know what you plan on doing with header position absolute. If you want everything centred it may be better to have an all-inclusive wrapper and centre that then everything within it will be centred.

olls

1:27 pm on Feb 17, 2011 (gmt 0)

Thanks ill try that.
(i did have the

by the way!)

miketopher

7:18 pm on Feb 20, 2011 (gmt 0)

sevencubed is right

primarily the centering css code is
margin: 0 auto;
this will center the div

olls

6:28 pm on Feb 22, 2011 (gmt 0)

I still can not get it to work, i dont know what i am doing wrong, ive put all the content into a container div and it still wont work, here is the CSS:

div#container{
width:820px;
top:0;
margin:0 auto 0;
border-style:solid;
border-color:red;
}

and the HTML:

<div id="container">
<!-- content -->
</div>

Please help!

SevenCubed

6:32 pm on Feb 22, 2011 (gmt 0)

If you are testing it in Internet Explorer make sure you have whatever doctype you are using such as:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
declared in your html or else it will be rendering in quirks mode and will not center.

olls

7:01 pm on Feb 22, 2011 (gmt 0)

THANKYOU!

finaly ive fixed it, ive been trying to do this for ages! The only problem is ive now mucked ut the positioning for the other elements... i should work it out

TheMadScientist

12:24 am on Mar 20, 2011 (gmt 0)

In case you ever need to do it with absolute positioning:

div#header{
background:url(topbackground%20pic.png);
position:absolute;
top:10px;
right:50%;
width:820px;
height:412px;
z-index:100;
margin:0 -410px 0 0;
padding:0;
}

olls

10:16 pm on Mar 21, 2011 (gmt 0)

thanks, the mad scientist, i had been trying right 50% but couldnt get it to work,this is perfect!

vseprav

4:05 pm on Mar 28, 2011 (gmt 0)

this should be enough
margin:0 auto

lucy24

3:29 am on Apr 16, 2011 (gmt 0)

this should be enough
margin:0 auto

Should be, but isn't ;-)

Some browsers are crotchety about "auto" combined with a numerical value. To be safe, write them out separately as "margin-top: 0; margin-left: auto;" and so on.