Welcome to WebmasterWorld Guest from 54.159.214.250

Forum Moderators: incrediBILL

How Can I Centre a Div?

centring div's

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

WebmasterWorld Senior Member



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)



Thanks ill try that.
(i did have the
}
by the way!)
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
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!
6:32 pm on Feb 22, 2011 (gmt 0)

WebmasterWorld Senior Member



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)



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)

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



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)



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)



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

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



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.
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month