Positionnement de cadres

[Nissone]

J'ai fais un p'tit dessin pour me faire comprendre :

Alors voilà, j'ai un cadre à gauche, et je voudrais que mon cadre à droite ne revienne pas en dessous, même s'il est plus grand en hauteur.

Voilà mon code :

 .Gauche {
  float: left;
  width: 220px;
	padding-right: 20px;
 }

.Contenu {
  position: relative;
 }

Il me semble que je l'ai vu un jour dans un tutoriel, mais impossible de retrouver lequel !

Est-ce que quelqu'un peu m'aider ?

[Dinostrate]

Salut Nissone

Ca tombe bien, je viens d'étudier le truc. Pour le moment, la solution la plus "élégante" que j'ai trouvée consiste à inclure un autre cadre, float right, dont tu laisses le fond transparent. Le problème, c'est la proportionalité du cadre principal qui devient conteneur. Je n'ai pas encore trouvé la solution pour le rendre variable, mais si tu le fixes, pas de problème.

A+

Dino.

[Dinostrate]

Je ne suis pas à pied d'oeuvre pour vérifier, mais tu pourrais aussi essayer un padding-left plus large que la dimension du cadre gauche dans le conteneur. (à voir).

Dino

[Nissone]

"tu pourrais aussi essayer un padding-left plus large que la dimension du cadre gauche "

Je vais essayer ça.

Je te remercie pour tes pistes.

[Monique]

Bonjour,

Une solution à ce problème est expliquée sur Openweb.

Il s'agit d'ajouter un bloc avec la propriété clear: both;

Mais pour te répondre avec plus de précision, il serait utile que tu donnes aussi la portion de code html concernée. La manière dont tu as agencé tes blocs est importante

[Nissone]

Ah la la ! J'ai beau m'attendre à ce que les CSS soient riches, c'est toujours plus riche que je ne croyais

Bon, pour l'instant, la réponse de Dinostrate me permet d'obtenir ce que je veux et le lien vers Openweb me rappelle tout ce que j'ai encore à apprendre !!!

En avançant, je rencontre un petit problème.

Pour mon cadre de gauche, j'ai voulu mettre une hauteur en % pour que le cadre remplisse presque toute la hauteur de son conteneur.

 
 .Gauche {
  float: left;
	margin-left: 10px;
  width: 190px;
	height: 80%;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-right: 0px;
	background-color: #F1EFCF;
 }

Dans IE, il interprête que mon cadre Gauche doit faire 80% de la hauteur du conteneur et me l'agrandi.

Dans Netscape, il interprête que mon cadre doit faire 80% de sa propore hauteur, et donc, me le rappetisse.

Je suppose du coup que c'est moi qui ne leur ai pas bien expliqué. Quelle est la bonne façon de faire ?

<div class="Page"><!-----------------------------Début div page-->

<div class="Gauche"><!---------------------------------------------début div Gauche-->

<br>

<br>

</div><!---------------------------------------------Fin div Gauche-->

<div class="Contenu"><!---------------------------------------------début div contenu-->

<br>

<br>

<br>

<br>

</div><!---------------------------------------------Fin div contenu-->

</div>

<!-----------------------------Fin div Page-->

[Dinostrate]

Je pense que Ie est plus laxiste que les autres navigateurs et permet une plus grande "approximation" Bon, ce n'est que mon impression. Cependant, j'ai commencé a résoudre quelques problèmes en partant de ce postulat.

En tout cas, ton code semble correct. Donc, si ma logique est bonne, il faut donc se demander s'il ne manque pas de précisions complémentaires pour les navigateurs plus exigeants.

Est-ce que tu as placée un "clear: both" comme l'a indiqué Monique ?

Sur openweb, t'as une précision sur ce code, d'ici, j'me souviens plus....

Dino

[Dan]

Nissone,

En définissant un "float:left" pour le cadre de gauche tu lui demandes de flotter et donc le texte du cadre de droite va "s'enrouler" autour du cadre gauche.

Supprimes simplement le "float:left;" et cela te donnera le résultat que tu cherches

Dan

[Le Corbusier]

Dans ne penses tu pas que Si tu enlèves float : left , logiquement la boite div va se retrouver dessous et non à côté