Discussion :

[Sergejack]

J'ai un div duquel je souhaite la largeur à son expression minimale (ajusté au contenu) et non pas étendue au maximum.
Comment faire ?

PS: ce div doit être aligné au centre de son conteneur parent (un autre div).

[Bisûnûrs]

Mets display:inline sur le div contenu et text-align:center sur le div conteneur.

[Sergejack]

Ça fait disparaître mes espaces intérieur (padding-top en particulier).

En attendant, je vais utiliser une table 1*1 (vive les browsers !).

[BnA]

Ça fait disparaître mes espaces intérieur (padding-top en particulier).

Et en utilisant un <span>?

[Sergejack]

Le span ne respecte pas d'avantage les espaces intérieurs.

[Sergejack]

Résolu : Vive les tables.

Aux chiottes ceux qui promettent un monde meilleur en 100% div!

[Sub0]

Aux chiottes ceux qui promettent un monde meilleur en 100% div!

+1

Ça fait 2 plombes que je cherche une solution pour ajuster les dimensions d'un div à son contenu et le centrer dans ma page...
J'ai essayé avec tous les types de conteneurs et toutes les propriétés CSS de positionnement... rien à faire!

Pour être compatible W3C, ne pas utiliser les tableaux pour les mises en forme (qu'ils disent), mais là vraiment, je crois qu'il n'y a pas d'autre choix... En fait, le W3C est restrictif. surtout, ne fournit pas vraiment d'alternative... c'est facile d'interdire.

[warwill]

entièrement d'accord!
l'usage de table à tout va n'est pas correct ok mais faut
bien rendre au div ce qui leur appartient.
surtout que les différents navigateurs ne sont pas fichu
de s'entendre sur une syntaxe commune.

[Lidya]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<style type="text/css">
	#content {
		position: absolute;
		border: 1px solid red;
		background:#DDDDDD;text-align:right;
	}
</style>
 
<div id="content">
  		Contenu justifié à droite <br/>
 	 	Contenu plus long justifié à droite <br/>
</div>
 
<script language="javascript"> 
	content = document.getElementById("content")
	var x = content.clientWidth;
	content.style.width = x+"px";
	content.style.margin="0 auto";
	content.style.position="relative";
</script>

Certes, c'est bourrin :p

[Sub0]

Si tu utilises Javascript, tu peux à ce compte là créer une table dynamique avec document.write et innerhtml...
Le validateur W3C n'y verra que du feu!

En tous les cas, bravo à Lidya pour ses recherches!

[Sub0]

Tu peux faire quelque chose du genre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
div {float:right;position:relative;right:50%;}
p {border:1px solid black;text-align:right;position:relative;left:50%;}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div>
  <p>Contenu justifié à droite <br/>
  Contenu plus long justifié à droite <br/>
  </p>
</div>

Une solution existerait-elle ?

[Sub0]

Après quelques essais de cette solution, je crois qu'il est mieux d'utiliser un <div> plutôt qu'un <p> pour le second conteneur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div style="position:relative;right:50%;float:right;">
  <div style="position:relative;left:50%;">
    ...Votre contenu ici...
  </div>
</div>

Ça a l'air de fonctionner avec toutes sortes de contenu...

Je pense que cette solution mérite une balise [Q/R].

Encore bravo à notre championne du CSS !!