✔ gleiche Höhe bei 2 nebeneinanderliegenden Divs

Status
Nicht offen für weitere Antworten.
Eiszwerg

Eiszwerg

Erfahrenes Mitglied
Hallo Community,

ich bin echt am Verzweifeln mit den DIV-Dingern ;-)

Folgende CSS-Datei:
Code: 
.wrap
{
    width               : 700px;
    height              : 100%;
    margin              : 0px;
    padding             : 0px;
    text-align          : left;
}

.head
{
    width               : 700px;
    height              : 100px;
    background-image    : url(../gfx/head.gif);
}

.navi
{
    width               : 100px;
    float               : left;
    border-right        : solid 1px black;
    margin              : 0px;      
    margin-right        : 0px !important;   /* Für moderne Browser */
    margin-right        : -3px;             /* Für IE */
    padding             : 5px;
    background-color    : #ffffcc;
}

.text
{
    width:              : 600px;
    margin-left         : 110px !important; /* Für moderne Browser */
    margin-left         : 100px;             /* Für IE */
    padding             : 5px;
    padding-left        : 20px;
    background-color    : #ffffcc;
}

.bottom
{
    width               : 700px;
    height              : 100px;
    background-image    : url(../gfx/bottom.gif);
}

Das HTML-Gerüst sieht wie folgt aus:
HTML: 
  <body>
  <div class="wrap">
    <div class="head">
    </div>  
    <div class="navi">
    Navigation
    </div>
    <div class="text">
    Inhalt
    </div>
    <div class="bottom">
    </div>
  </div>
  </body>

Mein Problem ist nun Folgendes:
Wenn der Text länger wird, dann zieht sich das entsprechende DIV soweit, wie der Text eben nach unten geht. Die Navigation jedoch bleibt nach dem letzten Link "hängen" Auf dem Bild kann man das erkennen.
Ich habe schon verschiedene Höhen-Angaben bei .navi bzw. .text versucht, aber keine Lösung gefunden.
Wer kann und mag mir helfen?

Danke!
 

Anhänge

  • site.jpg
    site.jpg
    186,3 KB · Aufrufe: 67
Hmmm... Danke für den Link, aber wirklich weitergebracht hat mich das nicht. Ich möchte ja nicht mit Grafiken arbeiten. Oder habe ich das mangels English-Kenntnissen falsch verstanden?
Kannst Du mir das Prinzip bitte erläutern?
Danke Dir!
 
Ja, du hast das Grundprinzip schon richtig verstanden. Hierbei wird eine Grafik erstellt, in deinem Fall 700*1px, die die beiden Spalten "simuliert", und als Hintergrundbild in einem übergeordneten Element in der Vertikalen wiederholt wird, und somit immer für gleich hohe Spalten sorgt, egal wie groß (hoch) ihr jeweiliger Inhalt ist.

Ehrlich gesagt kann ich deinen Einwand nicht nachvollziehen, da du ja auch ansonsten in dem Dokument mit (Hintergrund-)Grafiken arbeitest.

Wie dem auch sei, wenn du eine "grafikfreie" Lösung suchst, kann ich dir noch Stu Nicholls' three column layout anbieten, das sich auch auf zwei Spalten reduzieren lässt.
 
Hab das noch ein wenig anders aufgefasst, aber anhand eines anderen Posts von Dir nun vom Prinzip her verstanden.
Allerdings... siehe Grafik...
Da, wo das Navi-DIV aufhört, hört nun auch die Grafik auf. Dass oben und unten noch der Strich rausguckt liegt an den transparenten GIFs... Die muss ich noch ändern.

EDIT:::
Mittlerweile klappt es im FireFox. Der IE zeigt es aber wie oben beschrieben und unten gezeigt.
 

Anhänge

  • site.jpg
    site.jpg
    138,7 KB · Aufrufe: 62
Zuletzt bearbeitet:
Kannst du die Seite mal online stellen, damit man da einen Blick drauf werfen kann?

Btw, mir erscheint hier auch der margin-left-Wert für den IE falsch:

Code: 
.text
{
    width:              : 600px;
    margin-left         : 110px !important; /* Für moderne Browser */
    margin-left         : 100px;             /* Für IE */
    padding             : 5px;
    padding-left        : 20px;
    background-color    : #ffffcc;
}
Er müsste doch 107px betragen, um den "3px-Bug" im IE zu fixen.
 
Punkt 1: Ersetze mal den verwendeten Doctype durch einen, der den IE nicht in den Quirksmode versetzt, damit er das Boxmodell richtig interpretiert, wie z.B.:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">

Punkt 2: Im Stylesheet musst du noch folgende Änderungen vornehmen:

Code: 
.navi
{
    width               : 91px;
    float               : left;
    /*border-right      : solid 1px black;*/ /* auskommentiert = deaktiviert */
    margin              : 0px;
    margin-right        : 0px !important;   /* Für moderne Browser */
    margin-right        : -3px;             /* Für IE */
    padding             : 5px;
    /*background-color  : #ffffcc;*/ /* auskommentiert = deaktiviert */
}

.text
{
    width:              : 609px;
    margin-left         : 101px !important;  /* Für moderne Browser */
    margin-left         : 98px;             /* Für IE */
    padding             : 5px;
    padding-left        : 20px;
    /*background-color  : #ffffcc;*/ /* auskommentiert = deaktiviert */
}
 
Du hast quasi den Rahmen komplett abgeschaltet und lässt die Aufgabe die GRafik übernehmen, richtig?
Hmmm... warum schwer, wenn's auch einfach geht.
Ich tendiere bei solchen "Problemen" immer wieder dazu Tabellen als Gerüst zu nehmen.

Ich bedanke mich herzlichst!
 
Du hast den rechten Rahmen der Navi-Leiste doch in der Grafik bg2.jpg "festgehalten", von daher ist die CSS-Angabe auch nicht mehr erforderlich. Gleiches gilt im übrigen auch für die Hintergrundfarben.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück