28172 sujets

CSS et mise en forme, CSS3

Faire un clear sur 2 colonnes sur 3

Bonjour,

Voici mon souci:

Dans un div général, j'en ai 2 autres, se nommant "colonneGauche" et "colonne droite".
Dans "colonneGauche", j'ai 2 cadres l'un à côté de l'autre eux aussi fait avec des div (le cadre de droite ayant un float:right)
Jusque là, tout fonctionne bien.

Je veux ensuite placer un nouveau cadre en dessus de ces 2 là, qui prend toute la largeur.
Souci, si le cadre de droite au dessus est trop long, il empiète sur la cadre du dessous.

J'ai donc voulu mettre un clear:both, mais, bien que ce clear soit dans le div "colonneGauche", il fait aussi effet pour la "colonneDroite" et mon cadre se retrouve 10km en dessous du coup puisqu'il attend que "colonneDroite" soit terminer pour se placer.

Et ma question donc:
- Comment faire pour faire un "clear" uniquement sur les cadres se trouvant dans "colonneGauche"?

En fichier joint une capture du souci, pour queça soit plus clair.
Merci!

upload/23687-image.jpg
La propriété CSS clear admet les valeurs suivantes :
* none (valeur par défaut),
* inherit,
* both,
* left,
* right.

Essaie avec la valeur left.
Il manque quand même certains élément dans la définition du problème mais j'ai tenté de faire un exemple du problème que tu disais.

<body>
    <div id="general">
        <div id="colonne_gauche">
            <div>
                <div>
                    <strong>small</strong>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet elementum nunc, sit amet molestie dui pretium eget. Proin id ligula ipsum. Sed id ipsum at magna tincidunt elementum. Etiam purus tellus, lobortis sit amet rutrum vel, vestibulum id sapien. Morbi ac mauris lorem, nec dapibus elit.  Nulla tellus orci, auctor sed aliquet et, consectetur nec est.</p>
                </div>
                <div>
                    <strong>small</strong>
                    <p>Morbi ac mauris lorem, nec dapibus elit</p>
                </div>
            </div>
            
            <div>
                <strong>large</strong>
                <p>Aliquam commodo dui a tortor suscipit facilisis. Aliquam venenatis dui in mi scelerisque in scelerisque orci convallis. In non pharetra risus.</p>
            </div>
        </div>
        <div id="colonne_droite">
            <div>
                <strong>Droite</strong>
                <p>Nulla nunc eros, suscipit vitae mollis in, semper a turpis.</p>
            </div>
        </div>
    </div>
</body>





#colonne_gauche,
#colonne_droite { float:left; }

#colonne_gauche { width:500px; }
#colonne_droite { width:300px; }

#colonne_gauche div { clear:both; width:450px; }
#colonne_gauche div div { float:left; width:200px; border:1px solid blue; clear:none; }


Ce serait bien que tu exposes ton code pour plus de détails.

En espérant que ça t'aide pour le moment
Sujet clos
Aller à