Layout mit zentriertem- und Rand-DIV

T

tluebke

Mitglied
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:

Code: 
--------------------------------------------

|-----|--- 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.
 
tluebke hat gesagt.:
Das mit dem Header-DIV ist ja klar, aber wie kann ich die Randbreiten bestimmen?
Zum Vergrößern anklicken....
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.
Zum Vergrößern anklicken....
Sondern?
[edit]Tipp-Ex[/edit]​
 
Zuletzt bearbeitet:
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...
jaizzvd78tz.jpg
 
Bootstrap bietet die Möglichkeit, im 12-spaltigen Raster-System Spalten abzurücken:
HTML: 
<!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.
 
Zuletzt bearbeitet:
Probier mal, ob es dir so reicht.
Code: 
<!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>
 
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.
 
Die Sache hat aber einen Haken. Der Opera will nicht mitspielen. Vielleicht doch JS?!
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück