Prevent schwebte divs zur nächsten Zeile Einwickeln

Question

Hier meine Seite ist vor allem:

www.kaiserroof.com/test/index2.html

So, hier ist mein Problem. Sie werden bemerken, dass sich unter der Trennleiste in der Mitte der Seite drei Spalten befinden, eine mit einer Form, eine mit Text, eine mit Links. Verkleinern Sie das Fenster jetzt auf etwas kleinere Größe, und das rechte Teil wird in die nächste Zeile verschoben. Gibt es das überhaupt nicht, um das anzuzeigen? Also, divs passen sich an (ich habe ein flüssiges Layout) bis zu dem Punkt, wo sie nicht passen werden, anstatt das div in die nächste Zeile zu legen, wird es einfach nicht angezeigt?

Ich hoffe, das macht Sinn. Jede Hilfe würde sehr geschätzt werden.

Answer 1

Sie können das auch nur mit CSS erreichen.

zuweisen Nur die folgenden CSS # row4 Attribute:

#row4 { 
    min-width:1202px; /* the exact value depends on the sum of the width of your 3 column boxes */ 
    overflow:hidden; 
} 

Diese etwas von Ihrer beabsichtigten Lösung unterscheidet sich, da die rechte Box teilweise sichtbar bleiben, wenn die Fenstergröße nach unten und vollständig nicht sofort verschwinden.

Bitte beachten Sie, dass die minimale Breite in IE6 nicht funktioniert. Allerdings gibt es mehrere Möglichkeiten, die min-width Eigenschaft zu emulieren, wenn Sie alte IEs unterstützen müssen:

http://www.thecssninja.com/xhtml/ie6-min-width-solutions

Answer 2

Sie müssten Javascript verwenden, um die Breite des Ansichtsfensters abzurufen, und dann die Anzeigeeigenschaft des zu umbrechenden DIV ändern: none, damit es nicht angezeigt wird, wenn die Browserbreite zu klein ist.

Answer 3

Sie können ihnen ein Wrapperdiv mit einem Min-Width-Set zuweisen und es zwingen, eine horizontale Bildlaufleiste zu verwenden, wenn sie zu klein wird. Das Schöne an einem Wrapper div ist, dass Sie ihm auch eine maximale Breite geben können, damit die Dinge nicht auf Super-Monitoren wackelig werden.

Ich bin kein Fan von horizontalen Bildlaufleisten, aber es schlägt vollständig Inhalte zu entfernen.

Answer 4

Ok hier ist das, was Sie sollten auf einer übergeordneten div

Wrap alle drei schwammen Division tun, so etwas wie dieses

<div id="parent"> 
    <div class="form">......</div> 
    <div class="text">......</div> 
    <div class="links">.....</div> 
</div> 

Jetzt ist Ihr Problem eine feste Höhe wie

den parent div geben zu lösen

#parent { height:400px;clear:both; }