CSS div qui prend la largeur restante Résolu/Fermé

Question

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).

// Largeur de 180px fixe

// Largeur de 20px fixe

// Largeur auto

// Largeur de 20px fixe

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.

notobe · Accepted Answer

Essaye ça (car de toute façon tes flottements ne sont pas logiques) code html (le right avant le center)

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; }

Petit Raptor · Answer

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

notobe · Answer

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 ?

Petit Raptor · Answer

Oui aussi x'D

Poby · Answer

@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;
}

Poby · Answer

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?

notobe · Answer

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 ?

Poby · Answer

Merci pour le lien.

Le version de IF c'est la 7.

notobe · Answer

Ç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

Poby · Answer

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.

notobe · Answer

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.

Poby · Answer

Oki, mais... les style conditionnel IE j'y connais rien (même si j'ai vu le principe).
Pourrais-tu m'orienter stp?

notobe · Answer

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]-->

Poby · Answer

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.

Poby · Answer

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

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. */ }

CSS div qui prend la largeur restante

15 réponses

Discussions similaires