# Layout mit zentriertem- und Rand-DIV



## tluebke (8. Februar 2015)

Hallo Leute,

ich habe ein Problem, dass ich irgendwie grad nicht zu lösen vermag. Ich weiß nicht, ob es eine Blockade ist, oder es nicht mit CSS funktioniert, wie ich mir das vorstelle, sondern die Browserbreite z.B. auslesen muss.
Das Layout soll wie folgt aussehen:


```
--------------------------------------------

|-----|--- Header-DIV              --- |---|
|-----|--- Zentriert, 800 px breit --- |---|

--------------------------------------------

|-----|--- DIV, was links bündig mit     --|
|-----|--- Header-DIV abschließt und mit --|
|-----|--- dem rechten Rand abschließt.  --|

--------------------------------------------
```

Das mit dem Header-DIV ist ja klar, aber wie kann ich die Randbreiten bestimmen?
Ich hatte sonst überlegt, ob ich statt der 800 px einfach eine relative Angabe (z.B. 80 %) mache, dann kann ich oben den Header mit 60 % zentrieren und hätte links und rechts jeweils 20 % Rand. Aber das ist eigentlich nicht gewünscht.

Kann mir da jemand helfen, oder muss ich die Browserbreiten tatsächlich für mein Anliegen auslesen? Würde zwar alles etwas komplizieren, aber wenn es nicht anders geht...

Danke sehr.


----------



## SpiceLab (8. Februar 2015)

tluebke hat gesagt.:


> Das mit dem Header-DIV ist ja klar, aber wie kann ich die Randbreiten bestimmen?


Mir ist zwar noch nicht ganz klar, wie die "Skizze" zu verstehen ist, aber zur Definition eines Randabstandes stehen margin (außen) und padding (innen) zur Verfügung.


tluebke hat gesagt.:


> Ich hatte sonst überlegt, ob ich statt der 800 px einfach eine relative Angabe (z.B. 80 %) mache, dann kann ich oben den Header mit 60 % zentrieren und hätte links und rechts jeweils 20 % Rand. Aber das ist eigentlich nicht gewünscht.


Sondern?
[edit]Tipp-Ex[/edit]​


----------



## tluebke (10. Februar 2015)

Sorry für die späte Antwort.
Das Problem ist, dass die Mittelspalte des Headers eine feste Breite haben sollte (800px). Das ist mit Prozent-Werten nicht zu erreichen. Links und rechts des Headers gibt es dann einen Rand (Je nach Breite des Bildschirmes fällt dieser mal größer, mal kleiner aus).
Der DIV, der unter dem Header ist, soll 800px + Rechter Rand betragen. Dabei soll er links mit dem Header-DIV abschließen und rechts mit dem Rand.

Ich habe das nun noch einmal als Grafik eingefügt, hoffe, dass es dadurch verständlicher wird. Ich habe eben das Problem mit der variablen Breite am rechten Rand...


----------



## SpiceLab (11. Februar 2015)

Bootstrap bietet die Möglichkeit, im 12-spaltigen Raster-System Spalten abzurücken:

```
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap - Spalten abrücken</title>
    <!-- Bootstrap -->
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
      .container {width:100%}
      .row div {margin-top:10px;background:#ddd}
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-6 col-md-offset-3 col-xs-6 col-xs-offset-3">Header</div>
        <div class="col-md-9 col-md-offset-3 col-xs-9 col-xs-offset-3">Content</div>
      </div>
    </div>
  </body>
</html>
```

Da der Header aber eine feste Breite besitzen soll, wirst du nicht darum herumkommen, die (Rest)Breite im Viewport zu ermitteln.


----------



## djheke (11. Februar 2015)

Probier mal, ob es dir so reicht.

```
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
* {margin:0;padding:0}

header{
 margin:0 auto;
 width:800px;
 height:100px;
 background:#ddd;
}

section {
 margin:0 0 0 auto;
 width:calc( 100% - 50% + 400px );
 min-width:800px;
 background:#dad;
}
</style>

</head>
<body>
<header>
<h2>Header</h2></header>
<section>
<h2>Inhaltsbereich</h2></section>
</body>
</html>
```


----------



## tluebke (11. Februar 2015)

Wow, das ist großartig. Danke sehr! Ich habe es jetzt zwar erst einmal nur mit codepen getestet, aber erzielt auf jeden Fall das erwünschte Resultat.
Dass es so einfach ist, hätte ich nicht gedacht.


----------



## djheke (11. Februar 2015)

Die Sache hat aber einen Haken.  Der Opera will nicht mitspielen. Vielleicht doch JS?!


----------



## SpiceLab (11. Februar 2015)

djheke hat gesagt.:


> Die Sache hat aber einen Haken.  Der Opera will nicht mitspielen. Vielleicht doch JS?!


Hab hier (auf Arbeit) Opera nicht zur Verfügung, um mir das mal näher anzuschauen, aber ab Version 26 wird *calc()* unterstützt - siehe http://caniuse.com/#feat=calc


----------



## djheke (11. Februar 2015)

hab V 12.15 Debian.


----------



## SpiceLab (11. Februar 2015)

djheke hat gesagt.:


> hab V 12.15 Debian.


Vielleicht ein Update gönnen 

Im aktuellen Opera 27 (OS: Win7) alles tipptopp 
[edit]Tipp-Ex[/edit]​


----------



## djheke (11. Februar 2015)

Ich habe schon die aktuellste Version für Debian. Die Meisten haben ja sowieso Win7 und höher.


----------



## sheel (11. Februar 2015)

Gemeint ist wohl Opera (12->27)


----------



## djheke (11. Februar 2015)

Das ist durchaus möglich, aber der liebe Opera verhält sich unter Debian seit geraumer Zeit etwas seltsam. Keine Ahnung warum.
Vielleicht arbeitet mein System gegen mich.


----------

