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)

10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year 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.

olls

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

10+ Year Member



Thanks ill try that.
(i did have the
}
by the way!)

miketopher

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

10+ Year Member



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)

10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year 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.

olls

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

10+ Year Member



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)

WebmasterWorld Senior Member 10+ 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;
}

olls

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

10+ Year Member



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)

10+ Year Member



this should be enough
margin:0 auto

lucy24

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

WebmasterWorld Senior Member 10+ Year Member 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.