CODEWITHSUNDEEP
htmlcsscenter
undone
undone

Reputation: 7888

put child at center of parent element

If you look at Yahoo! home page, you find all content centered in page and if you resize browser window, left and right space will be removed and then scroll bar will appear. I want the same but whatever I do, I can not do that:

<body>
<div id="main" >
   <div class="logo"></div>
   <div class="content"></div>
   <div class="copyright"></div>
</div>
</body>

I want main to be at center of page( width is fixed but margin is not).

Upvotes: 0

Views: 939

Answers (3)

undone
undone

Reputation: 7888

Note: this css doesn't work in IE. Solution:

<style type="text/css">
body{text-align: center}

</style>

from: http://www.cosnetics.co.uk/articles/IE7-margin-auto-not-working/

Upvotes: 0

Richard Andrew Lee
Richard Andrew Lee

Reputation: 1177

In css set it up like this.

#main {
   width: 960px;/*put your width*/
   margin: auto;
}

Upvotes: 5

JohnB
JohnB

Reputation: 19002

1st way:

#main {
  position:relative;
  width:600px;
  left:50%;
  margin-left:-300px;
}

2nd way:

body {
  text-align:center; /* Optional: IE5/6 Quirks Mode Hack */
}

#main {
  width: 600px;
  margin: 0 auto;
  text-align:left; /* Optional: IE5/6 Quirks Mode Hack */
}​

Upvotes: 1

Related Questions