CSS div qui prend la largeur restante

[Résolu/Fermé]
Signaler
-
 Poby -
Bonjour,
je suis en train de créer un div qui a pour fonction de s'étendre dans tout les place restante.

Pour faire simple. J'ai un div qui en contient 3 autres sur la même ligne d'une largeur de 180px. Ceux de gauche et droite ont une largeur fixe de 20px et celui du centre doit prendre la valeur qui reste automatiquement (ici 140px).

<div class="content"> // Largeur de 180px fixe
	<div class="left"></div> // Largeur de 20px fixe
	<div class="center"></div> // Largeur auto
	<div class="right"></div> // Largeur de 20px fixe
</div>


Lorsque je met la valeur width du div "center" à 100%, il récupère la valeur de "content" et à une largeur de 180px. Si je met des margin à "center" de 20px le décalage ce fait bien mais le le div reste à 180px.
Pour infos tout mes div ont la propriété float : left sauf "right" qui a float : right.

Merci d'avance.

15 réponses

Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
212
Essaye ça (car de toute façon tes flottements ne sont pas logiques)

code html (le right avant le center)
<div class="content">
	<div class="left"></div>
	<div class="right"></div>
	<div class="center"></div> 
</div>


code css
div.content {
        height : 20px;
	width : 180px;
	background-color :  #FF0000;
}

div.left {
	float : left;
	width : 20px;
	height : 100%;
	background-color :  #00FF00;
}

div.center {
	height : 20px;
	background-color :  #0000FF;
	margin-right:20px;
}

div.right {
        float:right;
	width : 20px;
	height : 100%;
	background-color :  #00FF00;
}
3
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 41713 internautes nous ont dit merci ce mois-ci

Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
212
Il faut que tu trouves ce qui ne va pas avec IE.
Admettons qu'il faille rajouter pour IE des padding:0 au div.content pour régler le problèmes (je dis ça comme je dirais n'importe quoi hein ;) )

Tu créés une feuille de style s'appellant ie.css par exemple dans laquelle tu ne notes que
div.content {
padding:0;
}


Dans ton head, après la déclaration de ta feuille de style de base tu mets :
<!--[if lte IE 8]>
   <link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

J'ai trouvé la solution.

Sous IE il faut rajouter un margin négatif de la largeur du div sur le coté ou il y a l'espacement.
Pour faire simple.

div.left {
	margin-right : -20px;
}

div.right {
	margin-left : -20px;
}


Y rajouter marche aussi sous FF mais sur d'autre navigateur je ne sais pas.

Je remet le code au complet au cas d'une pauvre âme égaré qui cherche la solution comme moi :P

code html
<div class="content">
	<div class="left"></div>
	<div class="right"></div>
	<div class="center"></div> 
</div>

code css
div.content {
        height : 20px;
	width : 180px;
	background-color :  #FF0000;
}

div.left {
	float : left;
	width : 20px;
	height : 100%;
	background-color :  #00FF00;
	margin-right : -20px; /* L'opposé de la valeur de width. */
}

div.center {
	height : 20px;
	background-color :  #0000FF;
	margin-right:20px;
}

div.right {
        float:right;
	width : 20px;
	height : 100%;
	background-color :  #00FF00;
	margin-left : -20px; /* L'opposé de la valeur de width. */
}
Messages postés
187
Date d'inscription
mardi 22 décembre 2009
Statut
Membre
Dernière intervention
16 mars 2010
1
Et pourquoi tu n'essaye pas tout simplement:
.center
{
width: auto;
}
Je sais même pas si sa marche mais à mon avis ce sera déjà un peu plus concluant.
Si ça ne marche pas on passera à la méthode archaïque x'D
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
212
Pourquoi mettre le central à 100% puisqu'il est dans un div fixe de 180px ?
Pourquoi ne pas le déclarer avec une taille fixe de 140px ?
Messages postés
187
Date d'inscription
mardi 22 décembre 2009
Statut
Membre
Dernière intervention
16 mars 2010
1
Oui aussi x'D
@petit Raptor
Le problème avec auto est que le div ne s'affiche plus. Enfin si mais il est comme à 0px (on le voit pas...). Enfaite ces div n'ont pas de contenu. Il serve juste à mette une image en background. Donc si je met auto j'aurais l'image à gauche, l'image à droite mais pas celle du centre.

@notobe
# Pourquoi mettre le central à 100% puisqu'il est dans un div fixe de 180px ?
Déjà si je met à 100% il aura une largeur de 180px, plus les 2 de 20px sa fait 220px : sa dépasse.

#Pourquoi ne pas le déclarer avec une taille fixe de 140px ?
Justement! Je veut qu'il trouve la taille tout seul ! En gros si je veut changer la largeur total j'ai juste besoin de modifier le width de content. Par exemple je veut que mon "tableau" fasse 100px, le met div.content {width : 100px;} et naturellement center prend 60px (100-20*2).

Vous voyez plus le problème?

Je rajoute mon fichier CSS sa sera peut être plus explicite.

div.content {
	height : 20px;
	width : 180px
	background-color :  #FF0000;
}

div.left {
	float : left;
	width : 20px;
	height : 100%;
	background-color :  #00FF00;
}

div.center {
	float : left;
	width : 100%;
	margin-left : 20px;
	height : 20px;
	background-color :  #0000FF;
}

div.right {
	float : right;
	width : 20px;
	height : 100%;
	background-color :  #00FF00;
}
Ha ba ça marche. Je comprend pas vraiment pourquoi mais ça marche parfaitement.

Sous mozilla pas de problème mais sous IE ça me met un petit vide de chaque coté de 2px environ.
Il faut rajouter une ligne spécifique pour IE?
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
212
Comme je te le disais, tes éléments flottants n'étaient pas bien disposés.
Je te conseille cette lecture :
https://openweb.eu.org/articles/initiation_float

En ce qui concerne IE, ça m'aurait étonné qu'il ne pose pas de pb ! :D
Quelle version de IE ?
Merci pour le lien.

Le version de IF c'est la 7.
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
212
Ça pourrait être un problème de haslayout (quoi que...)
Essaie de mettre un zoom:1 à l'élément parent, c'est à dire au div.content.

Sinon, un style spécial IE à déclarer en commentaire conditionnel qui réajuste les marges.
http://www.blog-and-blues.org/articles/Les_syntaxes_de_commentaires_conditionnels_pour_IE_Windows
j'ai essayer de rajouter zoom : 1 a div.content. Sa ne résout pas le problème sa en rajouter -_-' . En plus de faire planter la ligne suivant à cause du commentaire, sa rajouter 1px de hauteur a div.content .

Je suis allé voir cette histoire de hasLayout, mais il semblerait que se ne soit pas ça étant donné que le versin 7 aurait du régler ce problème. Et que si on aligne les div sur une même ligne le problème persiste.
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
212
Non, ce n'est que la version 8 qui règle le pb, hélas.
Mais j'avoue que je n'y croyais qu'à moitié car il n'y a pas de marges de déclarées dans l'élément parent.
Mais fallait essayer.

Alors il faut passer par un style conditionnel spécial IE.
Oki, mais... les style conditionnel IE j'y connais rien (même si j'ai vu le principe).
Pourrais-tu m'orienter stp?
Ok merci bien.

Bon voilà le problème est résolut, maintenant j'ai plus qu'a me débrouiller pour la fin avec notre ami IE.
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
212
Bon courage :)