Si tratta di un bug float di Firefox?

Question

Il progettista ha richiesto un layout dell'area a due colonne con le immagini nella colonna di sinistra, il testo a destra con una quotazione a larghezza intera sotto la prima immagine.

Il client inserirà il contenuto in questo sito basato su CMS in modo che le colonne debbano espandersi verticalmente secondo necessità. Non ci sono colori di sfondo sul sito reale, quindi le colonne non devono essere all'altezza uguale.

http://jsfiddle.net/juo0ubjw/

<div class="container"> 
    <div class="top-left">Picture here</div> 
    <div class="full-width"> 
     <blockquote>Blockquote here</blockquote> 
    </div> 
    <div class="bottom-left">Picture here</div> 
    <div class="top-right"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> 
    </div> 
</div> 

.container { 
    width: 300px 
} 
.top-left { 
    background:red; 
    width:100px; 
    height:100px; 
    float:left; 
} 
.top-right { 
    background:blue; 
    margin-left:100px; 
    width:200px; 
} 
.full-width { 
    background:purple; 
    float:left; 
    width:100%; 
    height:80px; 
} 
.bottom-left { 
    background:green; 
    float:left; 
    width:100px; 
    height:100px; 
} 
p { 
    padding:10px; 
} 

E le grandi opere in Safari, Chrome e IE. Ma in Firefox, c'è un problema strano con una parola che esce dal div a destra.

mio fix: http://jsfiddle.net/rfoc71pe/

ho visto menzione qui di una FF galleggiante bug relativi alla infinite larghezze e uno spazio bianco, ma che non sembra essere il caso qui come tutti i miei larghezze sono definiti e le parole stanno avvolgendo.

Domanda: qualcuno sa perché questo è successo e se in realtà è un bug o solo un problema con il mio CSS? Mi sto anche chiedendo se c'è un modo per sistemarlo che sembra meno hacky? Grazie!

Answer 1

Penso davvero che ci sia una specie di bug. Ma ho trovato una soluzione per il tuo :) Eccolo: JSFiddle.

HTML

<div class="container"> 
<div class="top-left">Picture here</div> 
<div class="full-width"> 
    <blockquote>Blockquote here</blockquote> 
</div> 
<div class="bottom-left">Picture here</div> 
<div class="top-right"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> 
</div> 

CSS

.container { 
    width: 300px 
} 

.top-left { 
    background:red; 
    width:100px; 
    height:100px; 
    float:left; 
} 

.top-right { 
    background:blue; 
    margin-left:100px; 
    width:200px; 
} 

.full-width { 
    background:purple; 
    float:left; 
    width:100%; 
    height:80px; 
    padding: 10px 0 10px 0; 
} 

.bottom-left { 
    background:green; 
    float:left; 
    width:100px; 
    height:100px; 
} 

p { 
    padding: 10px 10px 0 10px; 
} 

Se sei triste, non hai bisogno di un colore e il tuo blocco viola sarà bianco. Nella mia soluzione, non puoi vedere i bordi di questo blocco.

Prova a scrivere nel forum di Mozilla e descrivi il problema.