Casablanca: Umbruch bei divs verhindern

Hallo Forum,

ich habe da ein Problem, das ich leider nicht lösen kann. Es gibt da drei divs wie folgt:

  
<style>  
   .myDiv {  
       float:left;  
    }  
  
   .myInnerDiv {  
       float:rigth;  
    }  
</style>  
  
<div id="myDiv" style="width:94%">  
   <div id="myInnerDiv"></div>  
</div>  
<div id="myDiv"></div>  
<div id="myDiv"></div>  

Wie kann ich einen Umbruch da verhindern, wenn das Browserfenster verkleinert wird? Das "myInnerDiv" sollte auch nicht umgebrochen werden.

Gruß

  1. .bigboss  
    {  
       min-width: 1000px; /* oder was du willst */  
    }  
    
    
    <div class='bigboss'>  
       <div id="myDiv" style="width:94%">  
          <div id="myInnerDiv"></div>  
       </div>  
       <div id="myDiv"></div>  
       <div id="myDiv"></div>  
    </div>  
    
    

    Gruß
    Big Boss
    T-Rex

  2. Wie kann ich einen Umbruch da verhindern, wenn das Browserfenster verkleinert wird? Das "myInnerDiv" sollte auch nicht umgebrochen werden.

    Steht doch in der Zeile darüber:

    width, http://de.selfhtml.org/css/eigenschaften/positionierung.htm#min_width@title=min-width

    Hinweis:

    <div id="myDiv"></div>

    <div id="myDiv"></div>

      
    Eine ID soll eindeutig sein und darf nur GENAU EINMAL verwendet werden.  
      
    Jörg Reinholz
    
  3. @@Casablanca:

    nuqneH

    Wie kann ich einen Umbruch da verhindern, wenn das Browserfenster verkleinert wird?

    Du suchst die white-space-Eigenschaft?

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  4. Hallo,

    danke für die Antworten. Ich habe da was durcheinander gebracht:

      
    <style>  
       .myDiv {  
           float:left;  
        }  
      
       #myInnerDiv {  
           float:rigth;  
        }  
    </style>  
      
    <div class="myDiv" style="width:94%">  
       <div id="myInnerDiv"></div>  
    </div>  
    <div class="myDiv"></div>  
    <div class="myDiv"></div>  
    
    

    Mit einer Mindestbreite ist es nicht getan. Die Breite sollte variabel sein, wenn das Fensterbbreite sich ändert. Die divs sollten aber halt nicht umbrechen.

    Gruß

    1. <style>
         .myDiv {
             float:left;
          }

      #myInnerDiv {
             float:rigth;
          }
      </style>

      <div class="myDiv" style="width:94%">
         <div id="myInnerDiv"></div>
      </div>
      <div class="myDiv"></div>
      <div class="myDiv"></div>

      
      >   
      > Mit einer Mindestbreite ist es nicht getan. Die Breite sollte variabel sein, wenn das Fensterbbreite sich ändert. Die divs sollten aber halt nicht umbrechen.  
        
      Du meinst, die div der klasse myDiv sollen hübsch nebeneinander bleiben?  
        
      Naja. Es könnte auch so gehen:  
        
      ~~~html
      <!doctype html>  
      <div style="min-width:999px;padding:0;margin:0">  
         <div style="display:inline-block;margin:0;width:333px;background-color:red;border:0">Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, </div>  
         <div style="display:inline-block;margin:0;width:333px;background-color:blue;border:0">Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, </div>  
         <div style="display:inline-block;margin:0;width:333px;background-color:green;border:0">Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, </div>  
      </div>
      

      Alternativ kann man auch ein Verhalten wie bei einer Tabelle erzwingen:

      <!doctype html>  
        
      <style type="text/css">  
      .table {display:table;}  
      .row {display:table-row; }  
      .cell{display:table-cell; width:33%}  
      </style>  
        
        
      <div class="table">  
        <div class="row">  
          <div class="cell" style="background-color:red">Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, </div>  
          <div class="cell" style="background-color:blue">Foo, Bar, Foo, Bar,  Foo, Bar, </div>  
          <div class="cell" style="background-color:green">Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, Foo, Bar, </div>  
       </div>  
      
      
      1. Hallo Jörg,

        danke für die Hilfe. Leider werden die divs bei dem ersten Beispiel immer noch umgebrochen, wenn das Browserfenster verkleiert wird. Dsa zweite Beispiel haut auch nicht ganz hin, weil ich da viele andere verschachtelten divs habe, wodurch deren Formatiereung aus dem Rahmen gerät.

        Gruß

        1. Om nah hoo pez nyeetz, Casablanca!

          danke für die Hilfe. Leider werden die divs bei dem ersten Beispiel immer noch umgebrochen, wenn das Browserfenster verkleiert wird.

          Ja, du suchst die Whitespace-Eigenschaft. Und zwar mit dem Wert nowrap für das umgebende Element.

          div {  
            width: 25%;  
          }
          
          <div>1</div><div>2</div><div>3</div><div>4</div>  
          
          

          und

          <div>1</div>  
          <div>2</div>  
          <div>3</div>  
          <div>4</div>
          

          liefern mit obigem CSS andere Darstellungen.

          Matthias

          --
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Sandal und Sandalette.

          1. Hi,

            die white-space:nowrap-Eigenschaft bezieht sich auf den Text und nicht auf ein div-Element. Die divs müssen sich von der Größe her an das Fenster anpassen aber nicht umbrechen.

            Gruß

            1. Om nah hoo pez nyeetz, Casablanca!

              die white-space:nowrap-Eigenschaft bezieht sich auf den Text und nicht auf ein div-Element. Die divs müssen sich von der Größe her an das Fenster anpassen aber nicht umbrechen.

              Genau. Auch auf den Whitespace zwischen den Elementen. Deshalb schrieb ich „für das umgebende Element“.

              <div>1</div>EIN  
              <div>2</div>ZEILENUMBRUCH  
              <div>3</div>IST  
              <div>4</div>WHITESPACE
              

              Matthias

              --
              Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Not und Notar.

        2. danke für die Hilfe. Leider werden die divs bei dem ersten Beispiel immer noch umgebrochen, wenn das Browserfenster verkleiert wird.

          Ja. Mach den umgebenden Div etwas größer und es klappt.

          Dsa zweite Beispiel haut auch nicht ganz hin, weil ich da viele andere verschachtelten divs habe, wodurch deren Formatiereung aus dem Rahmen gerät.

          Dann solltest uns uns zeigen, was Du wirklich hast.

          Jörg Reinholz

  5. Hi,

    .myInnerDiv {
           float:rigth;
        }

      
    right schreibt sich anders.  
      
    cu,  
    Andreas
    
    -- 
    [Warum nennt sich Andreas hier MudGuard?](http://MudGuard.de/)  
    [O o ostern ...](http://ostereier.andreas-waechter.de/)  
      
    Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.