CODEWITHSUNDEEP
htmlcsspositioning
DoobyScooby
DoobyScooby

Reputation: 377

How to center a wrapper-div and not the content

I want my page to always be centered in the browser without affecting the content( like align-text: center; does). I want to center my wrapper-div.. How do I do this?

Simplifed existing page:

<div id="wrapper">       
    <div id="header">
        Music Heaven
    </div>
    <div id="topmeny">             
    </div>
    <div id="menu">        
    </div>        
    <div id="content">                  
    </div>           
    <div id="bottom">
        SiteAdmin
    </div>
</div>

Entire fiddle: http://jsfiddle.net/EndQb/

Upvotes: 7

Views: 87716

Answers (3)

samir chauhan
samir chauhan

Reputation: 1543

Set your style something like for the wrapper div.

#wrapper {

width: 841px;
margin: 0 auto;

}

In this way the wrapper div will always be centered according to your screen width. I hope it helps.

Upvotes: 2

Pankaj Upadhyay
Pankaj Upadhyay

Reputation: 13574

you can set the margin property for the wrapper div like following in CSS

#wrapper { margin:20px auto }

Upvotes: 1

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

 #wrapper {
     width: ...
     margin: 0 auto;
 }

no need to set text-align

Upvotes: 21

Related Questions