Div "prozentual" zentriert

[Gunnar Bittersmann]

Hello out there!

Zuerst wollte ich auch sagen, mit CSS sei das nicht möglich, für die Berechnungen müsse JavaScript her. Weit gefehlt; es geht ohne.

Stell die eine vertikale Linie vor, die den Viewport im Verhältnis 1 : 2 teilt. Damit der line Rand halb so groß ist wie der rechte, muss sich ein Drittel der Box links der gedachten Linie befinden:

┌─────┬───────────┐
│  ┌──┼─────┐     │
│  │  │     │     │
│  └──┼─────┘     │
└─────┴───────────┘

Mit

  body {  
    padding-left: 33%;  
  }

würde die Box an der Drittellinie anfangen. Sie muss also noch um ein Drittel ihrer Breite (die ist ja in Pixeln bekannt) nach links verschobn werden:

  div {  
    position: relative;  
    left: -253px;  
  }

See ya up the road,
Gunnar

PS: Und wie findet ein Nutzer mit schmalem Viewport eine Box mit einer festen Breite von 760px? Da er sehr ungern horizontal scrollt, wohl ziemlich blöd.