Div über Bodybreite

H

Hufy

Grünschnabel
Hallo User xD
Ich habe folgendes Problem:
Ich habe ein Body mit 900px (zentriert) und ein div darin, welches bis zum rechten und linken Browserrand gehen soll. Wie kann ich das realisieren? Hat da jemand eine Idee?

Danke im vorraus
 
Hufy hat gesagt.:
Ich habe ein Body mit 900px (zentriert) und ein div darin, welches bis zum rechten und linken Browserrand gehen soll. Wie kann ich das realisieren? Hat da jemand eine Idee?
Zum Vergrößern anklicken....
Nicht wirklich, bis eindeutig geklärt ist, ob du mit "Body" vom <body>-Element sprichst, oder ein weiteres <div>-Element umschreibst, und an welcher konkreten Stelle im Markup deines unbekannten Quellcodes sich das Szenario ereignen soll.

Oben? Unten? Mittendrin?
 
Zuletzt bearbeitet:
spicelab hat gesagt.:
Nicht wirklich, bis eindeutig geklärt ist, ob du mit "Body" vom <body>-Element sprichst, oder ein weiteres <div>-Element umschreibst, und an welcher konkreten Stelle im Markup deines unbekannten Quellcodes sich das Szenario ereignen soll.

Oben? Unten? Mittendrin?
Zum Vergrößern anklicken....

HTML: 
<body>
    <div style="width: 900px;">
        Text
    </div>
    <div ID="ganze_seitenbreite">
        Text
    </div>
    <div style="width: 900px;">
        Text
    </div>
</body>

Ich hab's schon mit:
Code: 
position:absolute;
left:0px;
width:100%;
z-index: -1;
aber da wird das letzte untere div auf dem "ganze seitenbreite"-div dargestellt
 
Zuletzt bearbeitet:
*hüstel-räusper*

Ein Block-Element (<div>, <h1-6>, <p>, <ul>/<ol>, <form>, ...) verhält sich von Natur aus, also mit ohne jeglicher CSS-Formatierung, genau so, wie von dir gewünscht; es dehnt sich in der Breite so weit aus, wie es die Grenzen und Abstände seines Elternelements zulassen.

Und da dem HTML zufolge drei benachbarte <div></div>-Bereiche existieren, das Vakante sich nicht in einem <div></div>-Bereich wiederfindet, dessen Breite begrenzt ist, weiß ich nicht, wo hier das/dein Problem ist.

HTML: 
<div ID="ganze_seitenbreite" style="background:#ddd;">

Oder weiß ich jetzt nur die halbe Wahrheit, was deinen Codeschnipsel betrifft?
 
Zuletzt bearbeitet:
es sind nich drei benachbarte sondern drei untereinanderliegende also so:

<body>
<div style="width: 900px;">
<div>
Text
</div>
<div ID="ganze_seitenbreite">
Text
</div>
<div>
Text
</div>
</div>
</body>
 
Zuletzt bearbeitet:
In diesem Codeschnipsel zuvor steht eindeutig was anderes - für die Märchenstunde ist aber noch recht früh, so viertel nach 5 am späten Nachmittag :rolleyes:

Hufy hat gesagt.:
HTML: 
<body>
    <div style="width: 900px;">
        Text
    </div>
    <div ID="ganze_seitenbreite">
        Text
    </div>
    <div style="width: 900px;">
        Text
    </div>
</body>
Zum Vergrößern anklicken....
Hufy hat gesagt.:
es sind nich drei benachbarte sondern drei untereinanderliegende
Zum Vergrößern anklicken....

Ob sie später untereinander folgen, oder am Bildschirm in der Seitenansicht nebeneinander erscheinen, ändert nix an der Tatsache, dass es sich weiterhin um drei benachbarte Kinder in deinem hinzugefügten <div> handelt, von denen eines ausbrechen soll.

Setz die Breite des umschliessenden <div> auf 100%, zentriere das obere und untere <div> mittels einem zusätzlichen margin:auto - fertitsch isch hier die Laube.
 
Zuletzt bearbeitet:
HTML: 
<body>
    <div style="width: 900px;">
        <div>
            Text
        </div>
        <div ID="ganze_seitenbreite">
            Text
        </div>
        <div>
            Text
        </div>
    </div>
</body>

Das sind doch keine 3 Untereinanderliegende divs, wenn da noch n eltern div drum rum liegt!? Oder doch?
 
Falls jemand in der Zukunft dieses Thema aufschlagen sollte, und meiner letzten Erläuterung zur Lösungsfindung nicht recht folgen kann:

HTML: 
<body>
    <div id="wrap">
        <div class="center">
            Text
        </div>
        <div id="ganze_seitenbreite">
            Text
        </div>
        <div class="center">
            Text
        </div>
    </div>
</body>
CSS: 
div#wrap, div#ganze_seitenbreite { width:100%; }
div.center { width:900px; margin:auto; }
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück