Topic: wrapper (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=24680" title="Pages that link to Topic: wrapper (Page 1 of 1)" rel="nofollow" >Topic: wrapper <span class="small">(Page 1 of 1)</span>\$

sunsuron Nervous Wreck (II) Inmate From: Cyberajaya, Kuala Lumpur, Malaysia Insane since: Jul 2002	posted 01-13-2005 14:21 code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title> div.2.col </title> <style type="text/css"> <!-- #wrapper { margin: 10px auto; padding: 0px; border: 1px solid #ccc; width: 9px; voice-family: "\"}\""; voice-family: inherit; width: 60%; } --> </style> </head> <body> <div id="wrapper"> div position itself to the center </div> </body> </html> I don't understand why this css can move the div to the center of page. Can anyone explain?
poi Paranoid (IV) Inmate From: France Insane since: Jun 2002	posted 01-13-2005 14:48 This CSS position the the wrapper DIV at the horizontal center thanks to the margin:10px auto; rule. Indeed this rule sets the vertical margin to 10px and the horizontal ones to auto, which actually means that the browser will try to equilibrate the margin right and left. And since the width of your DIV is only 60%, there's some room left to assign to the margin left and right. Is it clearer now ? The voice-family thingy is only here to trick some buggy browsers like IE5.
sunsuron Nervous Wreck (II) Inmate From: Cyberajaya, Kuala Lumpur, Malaysia Insane since: Jul 2002	posted 01-13-2005 15:12 Yes. Thank you very much.

Topic: wrapper (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=24680" title="Pages that link to Topic: wrapper (Page 1 of 1)" rel="nofollow" >Topic: wrapper <span class="small">(Page 1 of 1)</span>\$

sunsuron
Nervous Wreck (II) Inmate

From: Cyberajaya, Kuala Lumpur, Malaysia
Insane since: Jul 2002

posted 01-13-2005 14:21

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

  <head>

    <title>

      div.2.col

    </title>

    <style type="text/css">

<!--

#wrapper {

  margin: 10px auto;

  padding: 0px;

  border: 1px solid #ccc;

  width: 9px;

  voice-family: "\"}\"";

  voice-family: inherit;

  width: 60%;

}

-->

    </style>

  </head>

  <body>

    <div id="wrapper">

      div position itself to the center

    </div>

  </body>

</html>

I don't understand why this css can move the div to the center of page. Can anyone explain?

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted 01-13-2005 14:48

This CSS position the the wrapper DIV at the horizontal center thanks to the margin:10px auto; rule. Indeed this rule sets the vertical margin to 10px and the horizontal ones to auto, which actually means that the browser will try to equilibrate the margin right and left. And since the width of your DIV is only 60%, there's some room left to assign to the margin left and right.

Is it clearer now ?

The voice-family thingy is only here to trick some buggy browsers like IE5.

sunsuron
Nervous Wreck (II) Inmate

From: Cyberajaya, Kuala Lumpur, Malaysia
Insane since: Jul 2002

posted 01-13-2005 15:12

Yes. Thank you very much.

Post Reply

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: wrapper (Page 1 of 1)

Insert Slimies »

Insert UBB Code »

Topic: wrapper (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=24680" title="Pages that link to Topic: wrapper (Page 1 of 1)" rel="nofollow" >Topic: wrapper <span class="small">(Page 1 of 1)</span>\$