Impedire galleggiava div dal confezionamento alla riga successiva

Question

Qui è il mio sito, prima di tutto:

www.kaiserroof.com/test/index2.html

Così qui è il mio problema. Noterai che al di sotto della barra divisoria al centro della pagina ci sono tre colonne, una con un modulo, una con il testo, una con i collegamenti. Ora ridimensiona la finestra leggermente più piccola, e il div destro scenderà alla riga successiva. C'è comunque da non mostrare questo? Quindi, le div si regoleranno (ho un layout liquido) fino al punto in cui non si adatteranno, quindi, invece di avvolgere il div in basso alla riga successiva, non verrà semplicemente visualizzato?

Spero che abbia senso. Qualsiasi aiuto sarebbe molto apprezzato.

Answer 1

È inoltre possibile ottenere ciò solo con i CSS.

Basta assegnare i seguenti attributi CSS per # row4:

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

Questo è leggermente diverso dalla soluzione prevista, dal momento che la casella di destra rimarrà parzialmente visibile il dimensionamento giù il finestrino e non immediatamente scomparire completamente.

Si prega di notare che la larghezza minima non funzionerà in IE6. Tuttavia, ci sono diversi modi per emulare la proprietà min-width, se è necessario supportare i vecchi IE:

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

Answer 2

Dovresti utilizzare Javascript per ottenere la larghezza della finestra, quindi modificare la proprietà di visualizzazione del div che viene visualizzato per la visualizzazione: nessuno in modo che non venga visualizzato quando la larghezza del browser è troppo piccola.

Answer 3

Puoi dare loro un div wrapper con un set di larghezza minima e forzarlo a usare una barra di scorrimento orizzontale se diventa troppo piccola. La cosa bella di un div wrapper è che puoi dargli una larghezza massima e impedire che le cose diventino impercettibili su monitor enormi.

Non sono un fan delle barre di scorrimento orizzontali, ma batte completamente rimuovendo il contenuto.

Answer 4

approvazione qui è quello che si dovrebbe fare

Wrap tutti e tre divisioni galleggiava su un div genitore, qualcosa di simile

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

Ora per risolvere il problema dare un'altezza fissa alle parent div come

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