Spazio bianco indesiderato nella formattazione del testo in due colonne

[gfrancesc0a]

Gentili utenti di questo forum,

ho un blog su tumblr per il quale ho creato un tema personalizzato che ha come caratteristica principale la formattazione del testo in due colonne. Non ho una conoscenza approfondita di HTML e CSS, l'ho fatto per piacere. Il tema comunque è pubblico ed utilizzato da diverse persone.

Il risultato è stato soddisfacente, l'unico problema che ho riscontrato è nella resa delle immagini: quando c'è poco testo, tra le immagini che inserisco si crea uno spazio vuoto alla fine di una colonna e l'inizio dell'altra. Questo effetto indesiderato si manifesta inoltre in maniera diversa tra i vari browser (è particolarmente accentuato su Chrome e poco visibile su IE).

Il blog è questo, i primi due post sono da esempio:

http://provaminuta.tumblr.com

Potreste aiutarmi a risolvere il problema?

[webbeloz]

CSS equal height.
Se non trovi nulla on-line ti passo un esempio con l'uso di js.
ciao

[webbeloz]

+ semplice senza JS > http://wblz.co/WVmHs
dall'esempio creato dovresti capire come aggiustare il tuo CSS.

[gfrancesc0a]

Ciao webbeloz, grazie per l'aiuto!
Ho cercato di applicare il tuo esempio, ma senza effetto. Giocando un po' con la larghezza del browser e tenendo d'occhio la base del post "Prova" - laddove si manifesta il problema perché con poco testo - si vede che tra la didascalia dell'immagine di sinistra e il footer con la data c'è uno spazio abnorme. Il mio problema non è tanto lo spazio bianco dell'immagine di destra, quanto appunto quello di sinistra. Restringendo il browser, tra 840 e 875px prima e tra i 1000 e i 1080px poi, questo spazio sparisce. Quando il post invece ha molto testo, il rendering è corretto.

[webbeloz]

Ciao webbeloz, grazie per l'aiuto!
Ho cercato di applicare il tuo esempio, ma senza effetto. Giocando un po' con la larghezza del browser e tenendo d'occhio la base del post "Prova" - laddove si manifesta il problema perché con poco testo - si vede che tra la didascalia dell'immagine di sinistra e il footer con la data c'è uno spazio abnorme. Il mio problema non è tanto lo spazio bianco dell'immagine di destra, quanto appunto quello di sinistra. Restringendo il browser, tra 840 e 875px prima e tra i 1000 e i 1080px poi, questo spazio sparisce. Quando il post invece ha molto testo, il rendering è corretto.

di cosa...

ributta l'okkio nell'esempio e vedrai che poi risolvi...
Una cosa...
nel tuo HTML usi dei <div> liberi da classi / id per l'immagine.
Dagli una classe e vedrai che elimini qualsiasi spazio con un CSS mirato.

[gfrancesc0a]

webbeloz, purtroppo non riesco. Seguendo il tuo esempio (fatto benissimo), il mio div è twocolumns ed ho impostato anche le img del div con gli stessi parametri delle tue img. Però il difetto permane. Non riesco a capire dove sia l'errore.

* { 
        margin:0; 
        padding:0; 
    } 
html, body { 
        height:100%; 
    }
.twocolumns { 
        -webkit-column-count: 2; 
        -moz-column-count: 2; 
        column-count: 2; 
        position:relative; 
        top:0.1%; 
        bottom:0; 
        margin:0px 0.1% 0px !important; 
        padding:1px; 
        height:auto !important; 
        height:100%; 
        text-align:justify; 
        line-height:normal; 
    }
.twocolumns img { 
        max-width:100%; 
        margin: 1em 0 0.8em 0; 
        display:block; 
    }