3 DIV côte-à-côte horizontalement auto grow

Résolu/Fermé

Pascal_22 Messages postés 534 Date d'inscription lundi 20 mars 2006 Statut Membre Dernière intervention 29 août 2014 - 8 nov. 2011 à 22:20
mohamed - 30 mars 2021 à 12:47

Bonjour,

Ce que j'essaie de faire c'est de mettre 3 <div> côte-à-côte(horizontalement) et de remplir l'espace manquant à l'aide de la <div> du centre. Donc la premiere DIV et 3ieme DIV on une largeur fix de 10px chacune et j'aimerais que ma div du centre prenne la largeur restant...

En fait, j'ai une image background (un cadre avec coin arrondi) que j'ai découpé en trois, donc dans la css de la div du centre, j'ai mis background-repeat:repeat-x;

J'ai mis la 1ere et 3ieme div en float:left et j'ai mis celle du centre avec une margin-left:10px sans le float;

Mais ça ne marche pas, en fait sur ma première ligne j'ai ma div 1 et ma div 2 qui prends toue la place restant, mais la div 3 apparait sur une autre ligne...

Savez-vous qu'est-ce que je dois faire?

Merci

Pascal_22

A voir également:

Comment aligner 3 div horizontalement css
+33 3 77 23 15 06 ✓ - Forum Mobile
:3 emoji ✓ - Forum Loisirs / Divertissements
:3 smiley ✓ - Forum Mail
Picasa 3 - Télécharger - Albums photo
Diviser une cellule excel en deux horizontalement ✓ - Forum Excel

4 réponses

Réponse 1 / 4

Pascal_22 Messages postés 534 Date d'inscription lundi 20 mars 2006 Statut Membre Dernière intervention 29 août 2014 54
Modifié par Pascal_22 le 8/11/2011 à 22:28

J'ai trouver!

Voici la solution...

<div style="float:left;width:10px;">left</div> 
<div style="float:right:;width:10px;;">right</div> 
<div style="margin:auto;">middle</div>

Bref faut mettre dans cette ordre: div(left) div(right) et div(middle)

Espérent que cela peut aider d'autre personne.

Bonne soirée!
Pascal

Pad-Jah
19 janv. 2012 à 20:26

Merci pour l'info :)

Jo
2 mars 2012 à 09:52

Merci, ça m'a éviter une nouvelle crise de nerfs ;o)

mohamed
30 mars 2021 à 12:47

merci bcp chef

Réponse 4 / 4

sniperdc Messages postés 4 Date d'inscription vendredi 22 mars 2013 Statut Membre Dernière intervention 26 novembre 2013 2
26 nov. 2013 à 15:01

Code inexacte hélas.

Quand on l'exécute dans Internet Explorer 10, Mozilla Firefox ou Google Chrome.
Apparaît ne nombreuse inexactitude.

De plus soyons formelle dans nos explications, donnons un code clair et lisible et correct également tant que faire ce peut

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>

<body>
<div style="float:left; width:100px; background-color:#F00">left</div>
<div style="margin:auto; background-color:#FF0">middle</div> 
<div style="float:right; width:100px; background-color:#0F0">right</div> 
</body>
</html>

Essayer le code et vous verrez le bug de retour à la linge ou de décalage de la troisième Div.

Discussions similaires

Envoyer des requêtes HTTP

Comment faire un trait avec word 2010?

Je cherche un bon forum de discussion libre

Impossible de jouer a mw3

Problème multijoueur MW3 sur Ps3

Modifier la date de création d'un fichier PDF