homepage Welcome to WebmasterWorld Guest from 54.167.177.180
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
How Can I Centre a Div?
centring div's
olls



 
Msg#: 4268115 posted 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

WebmasterWorld Senior Member



 
Msg#: 4268115 posted 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



 
Msg#: 4268115 posted 1:27 pm on Feb 17, 2011 (gmt 0)

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



 
Msg#: 4268115 posted 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



 
Msg#: 4268115 posted 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

WebmasterWorld Senior Member



 
Msg#: 4268115 posted 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



 
Msg#: 4268115 posted 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

WebmasterWorld Senior Member themadscientist us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4268115 posted 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



 
Msg#: 4268115 posted 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



 
Msg#: 4268115 posted 4:05 pm on Mar 28, 2011 (gmt 0)

this should be enough
margin:0 auto

lucy24

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



 
Msg#: 4268115 posted 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved