homepage Welcome to WebmasterWorld Guest from 54.204.142.143
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
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:4268117
 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




msg:4268128
 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:4268393
 1:27 pm on Feb 17, 2011 (gmt 0)

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




msg:4269876
 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:4270665
 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




msg:4270669
 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:4270683
 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




msg:4284376
 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:4285306
 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:4288568
 4:05 pm on Mar 28, 2011 (gmt 0)

this should be enough
margin:0 auto

lucy24




msg:4298754
 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