• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

float: DIV verutscht nach unten

Status
Für weitere Antworten geschlossen.
D

david87hd

Neues Mitglied
Hallo,

ich habe folgenden Quellcode:

HTML: 
  <style type="text/css">
  html, body {
   height:100%;
   text-align:center;
  }
  #framearound {
   width:800px;
   text-align:left;
   margin:auto;
   position:relative;
   min-height:100%;
   height:100%;
  }
  div[id]#framearound {
   height:auto !important; /*nur für Firefox und Opera*/
  }
  #navi {
   background-color:#C0C0C0;
   width:145px;
   float:left;
   height:100%;
  }
  #text {
   margin-left:150px;
   text-align:justify;
   background-color:#FFDDDD;
  }
    
  </style>
  
  
  <body>
   
  <div id="framearound">
   <div id="navi">
    das ist die navi
   </div>
   <div id="text">
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
   </div>
  </div>
  </body>

So funktioniert das Ganze, wie es soll.

Wenn ich jetzt aber ein "<nobr>..</nobr>" um "Text Text Text Text..." (ich will ein langes Wort oder überbreite Tabellen simulieren), dann zeigt das der Firefox und Opera richtig an. Das heißt, die Zeile geht gerade aus dem text-div weiter hinaus und zwar ohne das div zu vergrößern.
Der Internet Explorer (6 und 7) hingegen verbreitert das div so lange wie das Wort breit ist UND, das eigentliche Problem, er schiebt die Textzeile unter das Ende vom "navi-div".

Wie kann man es lösen, sodass der IE die Zeile oben anzeigt?

(Bei dem Quelltext handelt es sich um eine auf das Wesentliche verkürzte Version. Der Rest spielt definitiv keine Rolle.)

David
 
Versuchs mal mit overflow:visible; für das Element, dessen Größe sich nicht verändern soll.

Mal so nebenbei: Warum simulierst du ein langes Wort mit nicht standardkonformem Code (<nobr>), anstatt einfach ein langes Wort zu schreiben :D
 
Ich weiß, dass <nobr> kein HTML-Standard ist... aber bevor ich beim Testen alle 5 Sekunden das Wort ändern muss, benutze ich lieber das! So lange es funktioniert und nicht wirklich offiziell im Internet ist, reicht das doch!! Seht ihr doch sicher ein oder? :-?

overflow:visible funktioniert leider nicht. Umgekehrt funktioniert overflow:hidden auch nicht.

Hat sonst wer noch eine Idee, damit die Zeile nicht ans Ende vom navi-div rutscht?

Vielen Dank!
David
 
Lösung

Hey!

Ich habe eine Lösung gefunden. Das overflow hat mich auf eine Idee gebracht.

Dem text-DIV einfach eine feste Breite geben und overflow:hidden. Dann ist der überhängende Text zwar versteckt, aber immerhin ist die Zeile oben. Im Firefox reicht die feste Breite. Man sieht hier auch den überhängenden Text.

Na denn!

David
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben