Box (rechts) schiebt sich unter andere Box (links

[Norman]

Ich habe einen Rahmen bzw. Box. In dieser habe ich zweiweitere  Boxen.

Wenn man die Seite zusammenschiebt, und der Inhalt der linken (left) Box nicht so groß (nach unten) ist wie die rechte (middle), dann schiebt sich die rechte (middle) unter die linke Box.
Wie kann ich das verhinden, das die eine Box sich unter die andere Boch schiebt.

.box{
margin:0 2% 20px 0;
padding:0 0 10px 0;
border-right: #787878 1px dotted;
border-bottom: #787878 1px dotted;
width:47%;
float:left;
}

.box .left{
width:100px;
float:left;
}

.box .middle{
width:10px;
margin:0 0 0 0;
}

[Norman]

So das Probelme habe ich mit

margin:0 0 0 100px;

gelöst.

Jetzt schiebt sich die rechte (middle) nicht mehr unter die linke Box,
Aber leider, wenn man das Fenster verkleinert,

.box{
margin:0 2% 20px 0;
padding:0 0 10px 0;
border-right: #787878 1px dotted;
border-bottom: #787878 1px dotted;
width:47%;
float:left;
overflow: hidden;                  <----------- (siehe unten)
}

.box .left{
width:100px;
float:left;
}

.box .middle{
width:10px;
margin:0 0 0 100px;           <----------- NEU
}

overflow: hidden; : Verhindert das der Inhalt nicht aus der Box ragt, doch bei zusammenschieben verschwiendet der Inhalt. Es soll aber verhindert werden das die Box sich ab einer gewissen Grösse nicht mehr zusammenschieben lässt.

[Linuchs]

Wenn man die Seite zusammenschiebt, und der Inhalt der linken (left) Box nicht so groß (nach unten) ist wie die rechte (middle), dann schiebt sich die rechte (middle) unter die linke Box.

Ja, das nennt man Fließtext, auf englisch float. Du gibst es doch so an.

Wie kann ich das verhinden, das die eine Box sich unter die andere Boch schiebt.

Gib der umschließenden Box eine Mindestbreite, also mind. 110 px. 47% ist relativ zur Sichtfläche und kann kleiner werden als 110 px.

min-width: 110px;

Linuchs