Connecting Tech Pros Worldwide Help | Site Map
bytes > topic > html css > answers

how to center my main div with css

Familiar Sight
  
Join Date: Jun 2008
Posts: 164
#1: Feb 9 '09
Hi,

I am sure this is fairly obvious, I am designing a site which I want to be cross browser compatible. My content is 735px wide. I am having trouble working out how to get the main content div to show in the centre of the page.

Heres my css for the main div

Expand|Select|Wrap|Line Numbers
  1. body{
  2.     margin:0px;
  3.     padding:0px;
  4.     background:url(images/bgmain.jpg) 0 0 repeat-x white;
  5. }
  6. div, p, ul, ol, h1, h2, h4, h5, h6, img, form, label{
  7.     padding:0px;
  8.     margin:0px;
  9. }
  10. #mainbody{
  11.     width:700px;
  12.     position:relative;
  13.     margin:0 auto;
  14.     padding:0px;
  15.     float:center;
  16.     text-align:center;
  17.     background:white;
  18. }
Can anyone tll me how to centre this properly?
TheServant's Avatar
Expert
  
Join Date: Feb 2008
Location: Australia
Posts: 913
#2: Feb 9 '09

re: how to center my main div with css

There is no float:center attribute. If you change your body margin to:
Expand|Select|Wrap|Line Numbers
  1. margin: 0 auto;
And remove the "auto" in your mainbody margin attribute it should work.

I am not 100% sure about your position:relative either. If it doesn't work, take that out and see how it goes.
Familiar Sight
  
Join Date: Jun 2008
Posts: 164
#3: Feb 9 '09

re: how to center my main div with css

Expand|Select|Wrap|Line Numbers
  1. body{
  2.     margin:0 auto;
  3.     padding:0px;
  4.     background:url(images/bgmain.jpg) 0 0 repeat-x white;
  5. }
  6. div, p, ul, ol, h1, h2, h4, h5, h6, img, form, label{
  7.     padding:0px;
  8.     margin:0px;
  9. }
  10. #mainbody{
  11.     width:700px;
  12.     position:relative;
  13.     margin:0;
  14.     padding:0px;
  15.     text-align:center;
  16.     background:white;
  17. }
I have tried removing position:relative also but had no affect
TheServant's Avatar
Expert
  
Join Date: Feb 2008
Location: Australia
Posts: 913
#4: Feb 9 '09

re: how to center my main div with css

What about defining how wide your body is? Make it 1024px or something.
Familiar Sight
  
Join Date: Jun 2008
Posts: 164
#5: Feb 9 '09

re: how to center my main div with css

Thanks but that hasn't worked either. Any other suggestions because I am really lost at this stage
TheServant's Avatar
Expert
  
Join Date: Feb 2008
Location: Australia
Posts: 913
#6: Feb 9 '09

re: how to center my main div with css

Just did it on my PC:
Expand|Select|Wrap|Line Numbers
  1. body{
  2.     background: #000000;
  3.     height: 100%;
  4.     width: 1024px;
  5.     margin: 0 auto;
  6.     padding: 0;
  7. }
  8. #mainbody{
  9. width:700px;
  10. margin:0 auto;
  11. padding:0;
  12. text-align:center;
  13. background:white;
  14. }
  15.  
I think having margin: 0 auto; in both places did the trick. Goodnight ;)
Reply

« previous question | next question »

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,223 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved