Topic: wrapper Pages that link to <a href="https://ozoneasylum.com/backlink?for=24680" title="Pages that link to Topic: wrapper" rel="nofollow" >Topic: wrapper\
 
Author Thread
sunsuron
Nervous Wreck (II) Inmate

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

 IP logged posted posted 01-13-2005 14:21 Edit Quote
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

 IP logged posted posted 01-13-2005 14:48 Edit Quote

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

 IP logged posted posted 01-13-2005 15:12 Edit Quote

Yes. Thank you very much.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu