Deux div côte à côte et un float:right

Celle de droite à un float:right.
Le div avec la bordure couleur Or est le conteneur des deux div.

Vous avez déjà rencontré ce genre de problème http://img517.imageshack.us/img517/3842/sanstitrevz9.png ?
Modifié par SpaceCowboy (20 Jul 2007 - 20:18)

Bonjour,

Un petit clear: both quelque part dans ton bloc conteneur, non ?

<div style="clear: both"></div>

Un <hr> est plus up to date mais bon ...

Bonjour aussi

Sans page en ligne, ni code pas simple. A tout hasard as-tu consulté la faq:
Comment éviter que mes éléments flottants (float) dépassent de leur conteneur ?

J'avais essayé le clear;both/right/left sur tout les conteneurs/contenus.


Je peut te mettre du code si tu y tien, ca risque d'être un poil lourd ...

CSS

	#Texte_tab_bg { }
	
	#Texte_tab_bg #gauche {width:250px;}
	#Texte_tab_bg #gauche #haut{	height:32px; 		background-image:url(../image/interface/cadre_haut_250.png	); 	background-repeat:no-repeat;	top:10px; position:relative;}
	#Texte_tab_bg #gauche #centre{	padding:10px 20px;	background-image:url(../image/interface/cadre_centre_250.png); 	background-repeat:repeat-y;}
	#Texte_tab_bg #gauche #bas{		height:32px; 		background-image:url(../image/interface/cadre_bas_250.png); 	background-repeat:no-repeat;	top:-10px; position:relative;}
	
	#Texte_tab_bg #droite{ width:875px; float:right;    }
	#Texte_tab_bg #droite #haut{	height:32px; 		background-image:url(../image/interface/cadre_haut_875.png	); 	background-repeat:no-repeat;	top:10px; position:relative;}
	#Texte_tab_bg #droite #centre{	padding:10px 20px;	background-image:url(../image/interface/cadre_centre_875.png); 	background-repeat:repeat-y;}
	#Texte_tab_bg #droite #bas{		height:32px; 		background-image:url(../image/interface/cadre_bas_875.png); 	background-repeat:no-repeat;	top:-10px; position:relative;}
	#Texte_tab_bg #droite #image { text-align:center;}
	#Texte_tab_bg #droite #galerie li{display:inline; margin:5px; }

HTML

<div id="Texte_tab_bg">
	<div id="droite">
		<div id="haut"></div>
		<div id="centre">
			<br />IMAGE
			<br />IMAGE
			<br />IMAGE
			<br />IMAGE
			<br />IMAGE
			<br />IMAGE
			<br />IMAGE
			<br />IMAGE
			<br />IMAGE
			<br />IMAGE
			<br />IMAGE
			<br />IMAGE
			<br />IMAGE
			<br />IMAGE
			<br />IMAGE
			<br />IMAGE
			
		</div>
		<div id="bas"></div>
	</div>
	<div id="gauche">
		<div id="haut"></div>
		<div id="centre">
			<ul class="liste">Apparence 1
				<li><a href="">Corps</a></li>
				<li><a href="">Portait</a></li>
			</ul>
		</div>
		<div id="bas"></div>
	</div>
</div>

Modifié par SpaceCowboy (20 Jul 2007 - 21:04)

SpaceCowboy a écrit :
J'avais essayé le clear;both/right/left sur tout les conteneurs/contenus.

Et en lisant la faq, çà donne quoi ?

édit:

a écrit :
Je peut te mettre du code si tu y tien, ca risque d'être un poil lourd ...

Le mieux est une page en ligne, là ton code css présenté sur une seule ligne est peu lisible, ton code html présente uniquement la structure (c'est quoi tout ces br ?), il y a du contenu dans ces div vides ?
Modifié par Igor (20 Jul 2007 - 21:22)

a écrit :
... si tu y tien ...

Non, il n'y tient pas ... après tout c'est ton problème donc c'est vrai pour le résoudre on n'a pas besoin d'avoir de quoi le résoudre ...

Re,

Dur à dire comme ça mais au cas où

	   <style type="text/css">
	#Texte_tab_bg { border: 1px solid black;}

	

	#Texte_tab_bg #gauche {width:250px; background: lime; float: left}

	#Texte_tab_bg #gauche #haut{	height:32px; 		background: red; 	background-repeat:no-repeat;	top:10px; position:relative;}

	#Texte_tab_bg #gauche #centre{	padding:10px 20px;	background: yellow; 	background-repeat:repeat-y;}

	#Texte_tab_bg #gauche #bas{		height:32px; 		background: blue; 	background-repeat:no-repeat; position:relative;}

	

	#Texte_tab_bg #droite{ 
	margin-left:250px;  
	}

	#Texte_tab_bg #droite #haut{	height:32px; 		background: green; 	background-repeat:no-repeat;	top:10px; position:relative;}

	#Texte_tab_bg #droite #centre{	padding:10px 20px;	background: orange; 	background-repeat:repeat-y;}

	#Texte_tab_bg #droite #bas{		height:32px; 		background: black; 	background-repeat:no-repeat;clear: both; position:relative;}

	#Texte_tab_bg #droite #image { text-align:center;}

	#Texte_tab_bg #droite #galerie li{display:inline; margin:5px; }
	#pied{
	background: black;
	height: 40px;
	
	}
       </style>

   </head>

  <body>
<div id="Texte_tab_bg">
	<div id="gauche">

		<div id="haut"></div>

		<div id="centre">

			<ul class="liste">Apparence 1

				<li><a href="">Corps</a></li>

				<li><a href="">Portait</a></li>

			</ul>

		</div>

		<div id="bas"></div>

	</div>
	<div id="droite">

		<div id="haut"></div>

		<div id="centre">

			<br />IMAGE

			<br />IMAGE

			<br />IMAGE

			<br />IMAGE

			<br />IMAGE

			<br />IMAGE

			<br />IMAGE

			<br />IMAGE

			<br />IMAGE

			<br />IMAGE

			<br />IMAGE

			<br />IMAGE

			<br />IMAGE

			<br />IMAGE

			<br />IMAGE

			<br />IMAGE

			

		</div>



	</div>
		<div id="pied">133565</div>


</div>

</body>