28219 sujets

CSS et mise en forme, CSS3

Bonsoir,

J'ai essayé de rechercher un sujet se rapportant à mon probleme avant de poster.

Donc voici ce que j'aimerai obtenir :
j'ai 2 conteneur (div) 1 a gauche float left et 1 à droite avec float right, ma difficiulté est sous firefox, je ne connais pas par avance ni la largeur de la colonne de gauche, ni la colonne de droite, mais j'aimerais que les deux blocs restent sur la même ligne(sous IE ca marche) et non pas si la largeur est trop grande passe à ligne (ce qui ce passe sous ff).

Precision : mon premier bloc contient une image qui change en fonction du jour et mon 2eme bloc un tableau qui contient du texte

avec un petit dessin :

-| bloc 1 | | bloc 2 |- ce que je souhaiterais avec ff les 2 bloc restent sur la meme ligne

ce que je ne souhaite pas : que mon float coule cad le bloc 2 passe en dessous du bloc 1 si la somme des 2 largeur de blocs est trop grande
-| bloc 1 | -
-| bloc 2 | -

Merci pour votre aide et vive alsacreation
Modifié par crazyjojo (06 Dec 2005 - 23:09)
Bonjour,

L'interprétation que fait Firefox de ton code est la bonne. Si tu places deux div en flottant, il est normal que si la largeur du conteneur (contenant tes deux div) est trop petite, l'élément suivant aille à la ligne.

Une solution est de faire apparaitre ton bloc droite en premier dans le code, et de lui attribuer un float: right.

ce qui donnerait:

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


quant au float, ne l'attribuer qu'au bloc de droite. On aurait par exemple

#droite {
        background-color:#66FF33;
	float:right;
}
#gauche {
	background-color:#3399FF;
}


Si l'un des deux blocs a une largeur trop grande, les deux blocs se chevaucheront. Ce qui est normal : si ca ne passe pas à la ligne, alors ca se superpose.

Voilà Smiley biggrin
Modifié par notoon (07 Dec 2005 - 09:35)
Merci d'avoir répondu aussi rapidement notoon,

Mais ce que je cherche, c'est reproduire le comportement d'un tableau, en effet, dans mon div de gauche (float left, j'ai une image) et dans mon div de droite (float right) j'ai du texte, alors ce que j'aimerai, c'est que le texte reste à droite de l'image.
Le probleme, c'est que je ne connais pas les largeur de l'image et du texte par avance. Smiley bawling
Comment faire??

Merci pour votre aide.
Merci notoon !

J'ai enlevé le float right et magique, la boite de droite s'adapte en largeur, dingue ce truc