André: Inhaltsumbruch in divs

Hallo,

in folgendem Codebeispiel zeige ich zwei div-Elemente nebeneinander innerhalb eines übergeordneten divs an:

<html>
<style type="text/css">
.layer {width:150px; height:20px; float:left;}
</style>
<body>
<div style="width:400px; height:60px; background-color:#eeeeee;">
<div class="layer" style="background-color:#888888;"></div>
<div class="layer" style="background-color:#333333;"></div>
</div>
<body>
</html>

Ändere ich die Breite der inneren Elemente von 150px auf 250px, sodass diese breiter als das Elternelement sind, erfolgt automatisch ein Umbruch und innen drin wird das zweite div nun unter dem ersten div angezeigt.

Gibt es eine Möglichkeit, die beiden inneren divs weiterhin nebeneinander anzeigen zu lassen, obwohl sie breiter als das umgebende div sind? Der überstehende Teil soll dabei nicht mit angezeigt werden. (Analog wrap:off für textareas...). So etwas wie overflow:hidden oder overflow-x:scroll für das umgebende div scheint in diesem Fall leider nicht zu funktionieren.

Danke für die Hilfe

Viele Grüße

André

  1. Hallo André,

    Gibt es eine Möglichkeit, die beiden inneren divs weiterhin nebeneinander anzeigen zu lassen, obwohl sie breiter als das umgebende div sind? Der überstehende Teil soll dabei nicht mit angezeigt werden. (Analog wrap:off für textareas...). So etwas wie overflow:hidden oder overflow-x:scroll für das umgebende div scheint in diesem Fall leider nicht zu funktionieren.

    Ja, du könntest beide floatende DIVs in ein weiteres DIV schachteln, das ausreichend breit ist und dieses durch das äußerste DIV mit overflow:hidden beschneiden.

    Gruß Gernot

    1. Hallo wahsaga, hallo Gernot,

      Ja, du könntest beide floatende DIVs in ein weiteres DIV
      schachteln, das ausreichend breit ist und dieses durch das
      äußerste DIV mit overflow:hidden beschneiden.

      Danke für die schnelle Antwort und die Anregungen. Hatte ich noch nicht daran gedacht. Vielen Dank.

      André

  2. hi,

    Ändere ich die Breite der inneren Elemente von 150px auf 250px, sodass diese breiter als das Elternelement sind, erfolgt automatisch ein Umbruch und innen drin wird das zweite div nun unter dem ersten div angezeigt.

    Gibt es eine Möglichkeit, die beiden inneren divs weiterhin nebeneinander anzeigen zu lassen, obwohl sie breiter als das umgebende div sind?

    Nicht mit float. Es ist eine der gunrdlegenden Eigenschaften von float, dass Elemente sich nach unten verschieben, wenn sie neben anderen keinen Platz mehr haben.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }