What is the best way to align the body of the page in to the center?

<div id='header'>Top fixec
    <div id='body' align="center">Main

    </div>
</div>

#header
{
    position: fixed;
    top: 0px;
    height: 20px;
    width: 100%;
    background: green;
}
#body
{
    margin-top: 30px;
    height: 3000px;
    overflow: auto;
}


The above works but the align="center" is deprecated so what is the equivalent to it?

Or a good way to use css to have top page fixed and body contents centered?  Also, it should not affect when i use media queries for a responsive site.
goodkAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Russ SuterCommented:
put this in your css

body { width: 960px; margin: 0 auto; }

Open in new window

0
RobOwner (Aidellio)Commented:
or just use the <center> tags

<center>
<div id='header'>Top fixec
    <div id='body' align="center">Main

    </div>
</div>
</center>
0
Russ SuterCommented:
The <center> tag is deprecated and not even supported in HTML5. You should use CSS instead.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

RobOwner (Aidellio)Commented:
Sorry, My mistake.  I was thinking of these older tags that are included in the html5 spec such as <table>.  Thanks Russ.
0
goodkAuthor Commented:
it works but now can't find the vertical scroll if the contents are large then the scroll bar is not appearing?
0
Russ SuterCommented:
Add overflow: auto to the css
0
goodkAuthor Commented:
#header
{
    padding: 10px;
    position: fixed;
    top: 0px;
    height: 22px;
    width: 100%;
    background: green;
    color: White;
    font-size: large;
}
#headersizeTomovethebodydown
{
    width: 100%;
    margin-top: 40px;
}

#body
{
    margin: auto;
    height: 3000px;
    overflow: auto;
    color: Black;
    width: 960px;
}


 I have the above so far.  

Do anyone has a sample css which get me started. Obviously, I wanted it to be responsive also.
0
RobOwner (Aidellio)Commented:
A couple of changes: http://jsbin.com/beqese/1/edit?html,css,output

How's that look?

body {
  margin: 0;
  padding: 0;
}
#header
{
    padding: 10px;
    position: fixed;
    top: 0px;
    height: 20px;
    width: 100%;
    background: green;
    color: White;
    font-size: large;
}
#body
{
    margin: 20px auto 0 auto;
    overflow: auto;
    color: Black;
    width: 60%;
}

Open in new window

0
goodkAuthor Commented:
Why the scrolls do not appear?

body {
  margin: 0;
  padding: 0;
}
#header
{
    padding: 10px;
    position: fixed;
    top: 0px;
    height: 20px;
    width: 100%;
    background: green;
    color: White;
    font-size: large;
}
#content
{
    margin: 20px auto 0 auto;
    overflow: auto;
    color: Black;
    width: 60%;
}
0
RobOwner (Aidellio)Commented:
I had #body, did you change this to #content?
You need to have a height specified day 300px
0
goodkAuthor Commented:
yes
0
RobOwner (Aidellio)Commented:
So all ok now?
0
RobOwner (Aidellio)Commented:
#content
{
    margin: 20px auto 0 auto;
    overflow: auto;
    color: Black;
    width: 60%;
min-height: 300px;
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
goodkAuthor Commented:
The vertical or horizontal scroll do not appear to view the additional contents.
0
goodkAuthor Commented:
I think I have been getting some silly suggestions by the experts!!!

As soon as we put,
position: fixed;
The vertical page scroll disappears.
0
goodkAuthor Commented:
thank you
0
goodkAuthor Commented:
I am very thankful to all the experts! All their suggestions are correct.

Not sure how I can go back and award them points
0
RobOwner (Aidellio)Commented:
Just request attention and a moderator can help :) however the selected comment you've chosen does answer your question. Everything after is kinda superfluous don't you think? I appreciate your comments though.
0
goodkAuthor Commented:
Thank you to all the experts
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.