Operazioni sinistra e destra galleggia a sovrapporsi al posto di pila

Question

Questo è più facile mostrare che spiegare: http://jsfiddle.net/gN4VZ/

E 'possibile avere il mio giusto contenuto flottato (blu) sovrapporre il mio tenore di sinistra-galleggiava (rosso) invece di accatastare sotto di esso quando i due si combinano per superare la larghezza del contenitore?

Answer 1

È possibile utilizzare absolute positioning.

Invece di float:right uso position:absolute; right:0; invece di float:left uso position:absolute; left:0;

Assicurarsi di impostare position:relative; sui vostri DIV genitore in modo che il posizionamento assoluto è relativo ai rispettivi contenitori al posto della pagina.

Answer 2

Utilizzare il posizionamento assoluto con la classe .box impostata su position:relative.

http://jsfiddle.net/gN4VZ/1/

Nota che ho dovuto impostare un'altezza su ogni .box in modo che wouldnt sovrappongono alto/basso.

i nuovi CSS sarebbe

.bar { 
    border:solid 1px black; 
    color:white; 
    position:relative; 
    height:40px; 
} 
.clear { 
    clear:both; 
} 
.left-bar { 
    background:red; 
    height:40px; 
    position:absolute; 
    left:0; 
} 
.right-bar { 
    background:blue; 
    position:absolute; 
    right:0; 
    height:40px; 
}​ 

---

come suggerito da My Head Hurts, si può solo posizionare quella giusta, che elimina la necessità per l'altezza del div esterno.

http://jsfiddle.net/gN4VZ/2/