DIV à largeur automatique

Bonjour,

2ème question de la soirée:

Comment faire pour qu'un div ne prenne pas toute la largeur de la fenêtre ?

J'ai un DIV avec ce texte:
[HTML]

Code:

---

1 2 3

<div id="Copyright"> <p>&copy; SKP @ Parking B 2004 -2007 - Last update: 27/01/2007 - Version 0.0.3<br> All the pictures are under a Creative Commons contratc</p>

---

[CSS]

Code:

---

1 2 3 4 5

#Copyright P { text-align: center; font-size: 7pt; margin-top: 7px; }

---

Ce DIV s'étale sur tout la largeur de la page, alors qu'il n'en fait que la moitié.
Est-il possible de lui indiquer de n'occuper que la place nécessaire, sans pour autant fixer sa largeur avec des "width" ?

C'est utile car
- si je demande en CSS un "border-top", il sera tracé sur toute la largeur et pas seulement au dessus de la partie où il y a du texte
- si j'aligne une partie du texte à gauche et l'autre à droite, elles le seront sur toute la largeur et pas relative au bloc.

Merci,

Laurent

Feuille de style :

Code:

---

1 2 3 4 5

p { text-align: center; font-size: 7pt; margin-top: 7px; }

---

Body :

Code:

---

1 2 3

<p>&copy; SKP @ Parking B 2004 -2007 - Last update: 27/01/2007 - Version 0.0.3<br> All the pictures are under a Creative Commons contratc</p>

---

En gros, tu me suggères de retirer le DIV ?

Ton bloc ne s'étale pas sur toute la largeur puisque tu as un <br> qui coupe la ligne...

Tu as différents moyens:

-Tout d'abord, un positionnement en absolute ou placer ton bloc en float fera que celui-ci s'adaptera à la largeur du contenu plutôt que d'occuper toute la largeur. Cependant il va falloir ruser un peu pour centrer...

- l'autre option est de passer ton texte en display:inline puisque le comportement par défaut des inline est de s'adapter à la largeur du contenu. Par contre si tu veux attribuer un border, tu ne pourras pas l'attribuer directement à l'élément contenant ton texte sous peine de le voir s'afficher sur les 2 lignes de texte, donc peut-être pas vraiment adapté à ton cas...

Un exemple avec un positionnement absolute:

html:

Code:

---

1 2 3 4

<div id="Copyright"> <p>&copy; SKP @ Parking B 2004 -2007 - Last update: 27/01/2007 - Version 0.0.3<br> All the pictures are under a Creative Commons contratc</p> </div>

---

css:

Code:

---

1 2 3 4 5 6 7

#Copyright { position:absolute; left:50%; }   #Copyright p { position:relative;right:50%;border-top:1px solid #000;text-align:center; }

---

Avec le float c'est idem sauf:

Code:

---

1 2 3

#Copyright { float:left;position:relative; left:50%; }

---

L'avantage du float est de pouvoir le garder dans le flux (pas nécessaire si c'est le dernier élément de ta page).