Welcome to WebmasterWorld Guest from 54.159.89.7

Forum Moderators: incrediBILL

Message Too Old, No Replies

How Can I Centre a Div?

centring div's

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

New User

5+ Year Member

joined:Feb 16, 2011
posts: 4
votes: 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
8:26 pm on Feb 16, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:June 14, 2010
posts:985
votes: 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.
1:27 pm on Feb 17, 2011 (gmt 0)

New User

5+ Year Member

joined:Feb 16, 2011
posts: 4
votes: 0


Thanks ill try that.
(i did have the
}
by the way!)
7:18 pm on Feb 20, 2011 (gmt 0)

New User

5+ Year Member

joined:Feb 20, 2011
posts:2
votes: 0


sevencubed is right

primarily the centering css code is
margin: 0 auto;
this will center the div
6:28 pm on Feb 22, 2011 (gmt 0)

New User

5+ Year Member

joined:Feb 16, 2011
posts: 4
votes: 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!
6:32 pm on Feb 22, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:June 14, 2010
posts:985
votes: 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.
7:01 pm on Feb 22, 2011 (gmt 0)

New User

5+ Year Member

joined:Feb 16, 2011
posts: 4
votes: 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
12:24 am on Mar 20, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member themadscientist is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 14, 2008
posts:2910
votes: 62


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;
}
10:16 pm on Mar 21, 2011 (gmt 0)

New User

5+ Year Member

joined:Feb 16, 2011
posts: 4
votes: 0


thanks, the mad scientist, i had been trying right 50% but couldnt get it to work,this is perfect!
4:05 pm on Mar 28, 2011 (gmt 0)

New User

5+ Year Member

joined:Mar 28, 2011
posts:2
votes: 0


this should be enough
margin:0 auto
3:29 am on Apr 16, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13062
votes: 304


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.