28173 sujets

CSS et mise en forme, CSS3

Un tableau d'une ligne avec deux colonnes en DIV + CSS

Bonjours !

Je me galère depuis un bout de temps sur un truc basique !

Créer un tableau d'une ligne contenant deux colonnes.
Mon code fonctionne parfaitement sous firefox mais plante sous internet explorer : 


/*Division de la page en deux colonnes                    */
div.deux_colonnes {
    margin : 0px;
    margin-left : 2px;
    margin-right : 2px;
    width : auto;
    overflow : auto;    
}
div.deux_colonnes div.gauche {
    margin : 0px;
    float : left;
    overflow : auto;
    height : 100%;
}
div.deux_colonnes div.droit {
    margin : 0px;
    overflow : auto;
    height : 100%;
}



                    <div class="deux_colonnes">
                        <div class="gauche" style="width:50%;">
                            
                        </div>
                        <div class="droit">
                            
                        </div>
                    </div>


Bien evidement, je compte mettre du contenu dans les "pseudos" colonnes. Comme par exemple:

                    <div class="deux_colonnes" style="background-color:#F1F1F1;border : dotted 1px #8E8E8E;margin-top:2px;">
                        <div class="gauche" style="width : 152px;">
                            <img src="./tmp/white.png" style="margin:10px;border:1px solid #8E8E8E;" alt="news" />
                        </div>
                        <div class="droit">
                            <p>Ange le jour, Diable la nuit...<br />[...] C'est parce que vous etes la jeunesse la plus élégante et la plus diabolique de Montpellier que nous vous invitons à venir celebrer cette soirée placée sous le signe de la purification [...] DRESS CODE : White (conseillé mais non obligatoire).</p>
                        </div>
                    </div>


Donc voici le résultat correcte sous firefox:
http://uploadez.com/image/572692.png

et le "mauvais" résultat sous internet explorer:
http://uploadez.com/image/433784.png

Savez-vous pourquoi ? Merci...
Salut.

Perso, dans ce genre de cas, j'utilise un tableau pour pas me prendre la tête...
masseuro a écrit :
met un clear:both sur deux_colonnes

Attribuer le layout à div.deux_colonnes devrait également « simuler » un contexte de formatage bloc, et éviter ces désagréments. Enfin disons que c'est à tester (mais si la solution du clear est facile à mettre en place, autant ne pas se prendre la tête...).
Sujet clos
Aller à