[Résolu] Enigme : Une DIV avec une largeur fluide

Bonjour à tous!
Là je sèche... J'ai réalisé un schéma de ce que je souhaite réaliser en CSS car c'est un peu compliqué à définir.

En gros, j'ai une div conteneur générale de 980px de large (en bleu).
A l'intérieur, j'ai une autre div qui contient un carrousel (en vert). Cette div verte est alignée à gauche de la bleue et doit s'étendre jusqu'au bord droit de la page.

Dans l'idéal, ceci aurait été super :

#verte{
position:absolute;
min-width:980px;
width:50% + 490px;
left:50%;
margin-left:-490px;
}

Mais comme vous pouvez le voir, ma ligne "width" n'est pas très conforme

Ainsi, ai-je un moyen d'écrire ceci autrement? Je pensais avec du javascript peut-être? Mais là mes connaissance sont trop limitées.

ou alors peut-être je m'y suis prise pas du tout correctement...

Voici mon fameux schéma :
http://img163.imageshack.us/f/campagneu.jpg/

Merci pour votre aide!
sarah
Modifié par sarahhh (08 Mar 2011 - 10:44)

Bonjour,

As-tu essayé avec float ?

Le div vert tu le mets avec un margin-left:0px;

Cordialement

Merci de ta réponse.
En fait oui j'avais essayé avec un code de ce type :

#verte{
float:left;
min-height:980px;
width:auto;
margin-left:0px;
}

mais cette div (qui est très grande) sort de ma page et fait apparaitre la barre de scroll horizontal.

J'ai pensé du coup à :

body{
overflow:hidden
}

Mais l'ennui est que mon carrousel (placé dans #verte) devient inutilisable car son bouton "suivant" se trouve hors de l'écran...

J'ai loupé quelque chose?
Modifié par sarahhh (08 Mar 2011 - 11:05)

Donc ton carrousel s'élargit en fonction de l'image (j'imagine) qu'il affiche. je me trompe?

Mon carrousel a une largeur de 100%. Il s'adapte donc à la div qui le contient.
Le problème avec le float:left est que je n'ai pas la possibilité de lui assigner une largeur.
Ainsi, mon carrousel s'étale sur toute sa largeur ; tu as raison.

Bonjour,

En positionnement absolu c'est relativement simple:

#test {
  position: absolute;
  right: 0; /* bord droit de la page */
  left: 50%; /* centre */
  margin-left: -490px; /* élargit vers la gauche */
}

Les limites de la technique:
- Si cet élément est contenu dans un autre (le conteneur global de 980px de large par exemple), ce conteneur ne doit pas être lui-même positionné (position absolute ou relative).
- Comme c'est du positionnement absolu, l'espace pris par l'élément ne sera pas pris en compte par les éléments adjacents, donc attention aux risques de superposition.
- Ça ne marche pas dans IE6 (tant pis pour sa gueule et tant mieux). Ça devrait marcher dans IE7 mais comme toujours avec celui-ci ça peut demander un peu de debug...
Modifié par fvsch (08 Mar 2011 - 12:02)

fvsch : you rock !!!
Ce que tu proposes marche nickel!
Modifié par sarahhh (08 Mar 2011 - 12:13)