Propriété clear à l'intérieur d'un contenu

Bonjour,

2 boîtes côté à côté (horizontalement) la première simplement avec width: 49% et la seconde avec un float: right et width: 49%.
Si la boîte de droite a un contenu plus long que celle de gauche, le contenu du dessous n'est pas "poussé"...
La propriété clear permet de palier à ce problème, sauf que dans mon cas, je me trouve à l'intérieur d'un site où sont déjà positionnés en float des colonnes gauches et droites...

Comment faire ?

Peut etre q'un exemple visuel serait le bienvenu?

Enfin pour ce que je comprends ne serait il pas possible de mettre tes deux boites dans un conteneur ( tu rajoute un conteneur dans le conteneur ou ya deja tes menus gauches et droites )? et comme ça tu y applique tes clears sans perturber tes menus gauches et droites
Modifié par SojaParadise (14 Sep 2005 - 13:43)

Salut ,

J'ai deja rencontrer ce probleme. Placer tes calques cote à cote n'est pas forcement la meilleur solution...
Essayes de placer ton element "flottant" (de droite...) à l'interieur d'un element fixe à gauche.

Exemple :

<div id="Principal"><div id="Flottant">Image</div>
Contenu
</div>

#Principal { 
position: relative;
width: 50%;
}

#Flottant {
position: absolute;
top: 0px;
right: 0px;
width: 50%;
}

Edit: je crois que je suis HS .. mais essayes cet methode avec un height: 100%; au calque flottant


Modifié par Champolion (14 Sep 2005 - 14:33)

Dans ton exemple, il n'y a pas de calque flottant ?

Oui, c'est l'image du calque flottant à droite... je suis HS...

Mais le resultat est un peu identique, sauf que le calque de droite n'est pas flottant.

Dans le principe, c'est de mettre ton cadre de droite , dans ton cadre de gauche, ce qui te permet de ne pas faire depasser ton calque de droite par dessus le footer(ou autres calques en dessous)...

Concretement ?

Je vois pas :
Ce qu'ils disent sur float:right
The element is moved below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document.

Cherches à imbrigué tes calques correctement avant (ce que j'aurai du te dire...) sinon c'est vite le bordel et tout se chevauche.

Comprendre l'héritage et la parenté des styles CSS :
http://css.alsacreations.com/Tutoriels-et-articles-divers/Comprendre-l-heritage-et-la-parente-des-styles-CSS

bonjour,

Il semble que vous mélangiez quelque peu les termes je vous invite dons à lire cette page de Raphaël sur les calques et les divs.

Quelle-est-la-difference-entre-un-div-et-un-calque
Modifié par knarf (14 Sep 2005 - 19:35)

Voici le problème :

http://86.196.124.202/temp/

En plus de ce problème, sous IE 5.x., les boîtes ne se mettent pas sur la même ligne. Apparemment le width: 49% retournerait 49% de la largeur totale et non celle de #centre...

Quelqu'un a la solution ?

Toujours personne ?

bonjour,
sans vouloir froisser personne, il me semble que dans le genre faire un code tordu , sujet a multiples bugs , il vaudrait mieux se tournée vers un tableau qui aura surtout l'avantage d'augmenter sa compatibilité.
??
bon courage !

edit: les bugs, je parle de Ie bien sur, , impossible de placé en marge gauche le bloc vert sans avoir de resultat completement loufoque (50% devient 75%, 25% devient 40% ?, etc .. de plus obligation de faire usage du z-index pour eviter la disparition de l'un ou l'autre des elements...) je me suis permis de faire cette remarque car j'ai essayé, et au mieux je suis arrivé a ce resultat: a jeter ! : http://gcyrillus.free.fr/essai/nicolas.htm

re-bon courage, ceci dit, je suis un bricoleur sans pretention, ne pas se tromper.
Modifié par gcyrillus (17 Sep 2005 - 11:21)

Bonjour,

Il n'y a pas de contournement possible du comportement des flottants, qui fait que la propriété clear force une boîte à se placer en dessous de n'importe quel flottant (ce qui n'a aucun rapport avec un bug quelconque, au passage).

La solution est d'utiliser une autre méthode que les flottants, soit pour tes colonnes, soit à l'intérieur de ton contenu (positionnement, ou display, ou tableau sans imbrication)
Modifié par Laurent Denis (17 Sep 2005 - 06:41)

Pour mes colonnes, j'utilise déjà la propriété clear pour que le footer puisse être pousser par tous les éléments (colonnes gauche et droite, mais aussi le centre).
Existe-t'il un autre mécanisme ?

Sinon, au niveau du contenu, je trouve ça quelque peu abhérent d'utiliser les tableaux comme outil de placement...

Tu parles de positionnement ou display ? Peux-tu m'en dire un peu plus ?

Tu m'expliques pour display ?

Je vois toujours pas de solution.

Personne n'a de piste ?

euh si ja'i bien compris, si j'utilise des float assez haut dans ma hierarchie, je ne pourrais plus jamais utiliser de clear ?