3 DIV côte-à-côte horizontalement auto grow [Résolu/Fermé]

Signaler
Messages postés
534
Date d'inscription
lundi 20 mars 2006
Statut
Membre
Dernière intervention
29 août 2014
-
Messages postés
4
Date d'inscription
vendredi 22 mars 2013
Statut
Membre
Dernière intervention
26 novembre 2013
-
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

4 réponses

Messages postés
534
Date d'inscription
lundi 20 mars 2006
Statut
Membre
Dernière intervention
29 août 2014
53
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
7
Merci

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

CCM 63550 internautes nous ont dit merci ce mois-ci

Merci pour l'info :)
Merci, ça m'a éviter une nouvelle crise de nerfs ;o)
Messages postés
4
Date d'inscription
vendredi 22 mars 2013
Statut
Membre
Dernière intervention
26 novembre 2013
2
J'ai trouvé et implémenté un code fonctionnel de 3 div cote à cote:
<!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>Div Flotante</title>
<style>
#bandeau
{
margin-left: 149px;
width: 797px;
background-color: #6bbdb7;
border-left: 3px solid #409e9d;
}
#gauche
{
background-color:#F00;
width: 200px;
float: left;

}
#milieu
{
background-color:#FF0;
width: 200px;
float: left;
}
#droite
{
background-color:#0F0;
width: 200px;
float: left;
}
</style>
</head>

<body>
<div id="bandeau">En tête</div>
<div id="gauche">Gauche</div>
<div id="milieu">Milieu</div>
<div id="droite">Droite</div>
</body>
</html>
Messages postés
4
Date d'inscription
vendredi 22 mars 2013
Statut
Membre
Dernière intervention
26 novembre 2013
2
Un complément d'information, utiliser le Responsive Web Design pour adapter la taille de le fenêtre à la résolution des écrans.
Messages postés
4
Date d'inscription
vendredi 22 mars 2013
Statut
Membre
Dernière intervention
26 novembre 2013
2
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.