Comment réduire un div

Version imprimable

20/11/2007, 10h13
Sergejack

Comment réduire un div

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).
20/11/2007, 10h16
Bisûnûrs

Mets display:inline sur le div contenu et text-align:center sur le div conteneur.
20/11/2007, 10h28
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 !).
20/11/2007, 11h36
BnA

Citation:

Envoyé par Sergejack

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

Et en utilisant un <span>?
20/11/2007, 16h31
Sergejack

Le span ne respecte pas d'avantage les espaces intérieurs.
29/11/2007, 11h07
Sergejack

Résolu : Vive les tables.

Aux chiottes ceux qui promettent un monde meilleur en 100% div! :yaisse2:
06/02/2008, 14h45
Sub0

Citation:

Envoyé par Sergejack

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... :mur:
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.
06/02/2008, 15h55
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.

Code:

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

06/02/2008, 21h45
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! :lol:

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

Citation:
Envoyé par Candygirl
Tu peux faire quelque chose du genre:
Code:

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

1 2 3 4 5 <div> <p>Contenu justifié à droite <br/> Contenu plus long justifié à droite <br/> </p> </div>
Une solution existerait-elle ? :aie:

08/02/2008, 01h17
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:

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 !! :king: