[RESOLU]Problème de 2 div qui ne veulent pas se caler haut container

Bonjour,

C'est une css qui régit l'affichage en 2 colonnes dans une page de Wordpress.
ça fonctionne bien sur Opera mais sur firefox et ie, les 2 div ne veulent pas être sur la même ligne, ce qui fait très moche.

En fait, les div class-postcolumn de droite ne se cale pas dans le haut du div column-sect, dont la hauteur est fonction de la taille du texte contenu dans la colonne de gauche




les classes fournies avec le pack.

div.column-sect {
    clear: both;
    display: inline-block;
    overflow: auto;
    }

div.post-column {
    display: inline;
    float: left;
    margin-right: 18px;
    text-align: justify;
    width: 45%;
    }

En rajoutant display:table-cell; ça remonte sur Opéra mais rien sur les autres.

les classes modifiées

div.column-sect {
    clear: both;
    display: inline-block;
    overflow: auto;
	display:table-cell;
	
    }

div.post-column {    
    float: right;
    margin-right: 5px;
    text-align: justify;
	border:#999999 thin solid;
    width:200px;
	padding:5px;
	height:auto;
	
	
	
    }

Quelqu'un a la soluce?
Modifié par kayorn (13 Oct 2010 - 18:54)

Bonjour.

Essaie d'ajouter un vertical-align: top sur tes deux div, en supprimant tes table-cell.
Redis nous ce que ça donne avec ça, et poste le html si ça ne marche pas.
Modifié par Florian_R (13 Oct 2010 - 18:58)

Ca fonctionne avec vertical-align:top (qui ne marche jamais avec rien...)
par contra ça inverse les colonnes..

[col-sect][column]
<h3><strong>Utilisation du cardio-fréquence-mètre
</strong></h3>
<h2><strong> </strong></h2>
Nom du fichier:
{filelink=1}



Post haec Gallus Hierapolim profecturus ut expeditioni specie tenus  adesset, Antiochensi plebi suppliciter obsecranti ut inediae dispelleret  metum, quae per multas difficilisque causas adfore iam sperabatur,.....

[/column][/col-sect]

[col-sect][column]
<div id="TheTexte">

Paphius quin etiam et Cornelius senatores, ambo  venenorum artibus pravis se polluisse confessi, eodem pronuntiante  Maximino sunt interfecti. pari sorte etiam procurator monetae extinctus  est.....



</div>
[/column][/col-sect]

Modifié par kayorn (13 Oct 2010 - 19:19)

Autant pour moi. Il faux aussi que tu retires tes float qui n'ont pas de sens avec des inline-block...

ca remet les colonnes une en dessous de l'autre

http://www.test.web2aconcept.fr/?page_id=351

Tu n'aurais pas retiré ton display:inline-block par hasard? Je ne le vois pas avec Firebug...

je viens de faire deux trois tests.
Avec Firebug, j'obtiens ce que tu souhaites sous Firefox avec

.column-sect {
vertical-align:top;
display:inline-block;
}
div.post-column {
border:thin solid #999999;
margin-right:5px;
padding:5px;
width:200px;
}

Question, c'est ton Cms qui t'oblige à avoir un paragraphe vide avant chaque div.post-column?
Et vu ta structure, tu ne peux pas simplifier en fusionnant tes div.column-sect avec tes div.post-column?

les indications sont données par le créateur du plugin wp-columnize pour wordpress

en gros c'est pour les clients qui veulent éditer les articles en 2 colonnes et qui ne veulent pas faire de html

http://darrinb.com/notes/2008/wp-columnize-a-wordpress-plugin-for-creating-columns-in-posts/

les deux manips à faire sont de cliquer sur 2 boutons qui génèrent un code dans le contenu.
tu n'as plus qu'à mettre ce que tu veux dedans.
Modifié par kayorn (13 Oct 2010 - 20:24)

j'ai l'impression que ça marche



fonctionne sur les 4 (opera/safari/ie8/fox.

Alors merci! pour moi et pour tous ceux qui trouveront le thread
Modifié par kayorn (14 Oct 2010 - 18:17)

résolu ?

jb_gfx a écrit :
résolu ?

résolu!

pourriez-vous supprimer ce doublon?
merci
Modifié par kayorn (14 Oct 2010 - 18:19)

en fait les classes que je mets dans mon post sont pas les bonnes.
prendre celles de Florian
Modifié par kayorn (14 Oct 2010 - 18:21)