# zentrieren, aber etwas verschoben...



## JBJHJM (24. August 2010)

Hallo!
Habe ein Problem (vereinfacht):
Im body soll ein div zentriert werden, aber nicht ganz mittig! links soll der Abstand zum Rand genau 150px größer sein! Bekomme ich das mit css noch hin oder muss ich das alles mit javascript berechnen lassen?

Danke!


----------



## hela (24. August 2010)

Hallo!

Ja, das bekommt man mit CSS hin. Aber was willst du eigentlich (horizontal?) zentrieren?


----------



## JBJHJM (24. August 2010)

Ein div mit fester Breite! Das Problem ist, dass ich links und rechts unterschiedlich breite menüs habe, die aber eine feste Breite haben, und mit position:absolute eingefügt sind. Nun soll der Hauptinhalt in der Mitte zwischen den beiden Leisten zentriert werden, was dann nur geht mit einem "verschobenen" margin:0 auto...


----------



## hela (24. August 2010)

Dann versuch es mal so:

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML5: Mini-Template</title>
    <style type="text/css">
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        text-align: center;
        /* realisiert auch bei Uralt-Browsern eine horizontale Zentrierung,
           diese Eigenschaft wird vererbt! */
      }
      #wrapper {
        position: relative;
        right: 150px;
        width: 640px;
        height: 480px;
        margin: 0 auto; /* realisiert die horizontale Zentrierung bei modernen Browsern */
        text-align: left; /* nimmt die vererbte Eigenschaft für Uralt-Browser ggf. zurück */

        border: 1px solid #000;
        background-color: #ffc;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <!-- Seiteninhalt -->
    </div>
  </body>
</html>
```
Wesentlich dabei ist, dass der WRAPPER-Block (relativ) positioniert ist. Dann kann man ihn auch in jede Richtung verschieben -> "right: 150px", wenn du eine Verschiebung nach links haben möchtest.


----------



## JBJHJM (24. August 2010)

Wow, funktioniert einwandfrei! Dass ich nicht selber drauf gekommen bin, einfach mal left:100px zu setzen ...  das war alles was noch fehlte 

Vielen Dank!


----------

