3 DIV côte-à-côte horizontalement auto grow
Résolu
Pascal_22
Messages postés
559
Statut
Membre
-
mohamed -
mohamed -
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
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
- Ai suite 3 - Télécharger - Optimisation
- Picasa 3 - Télécharger - Albums photo
- Photorecit 3 - Télécharger - Visionnage & Diaporama
- Diviser une cellule excel en deux horizontalement - Forum Excel
- 3 à l'envers ✓ - Forum Windows
4 réponses
J'ai trouver!
Voici la solution...
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
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
Merci pour l'info :)
Jo
Merci, ça m'a éviter une nouvelle crise de nerfs ;o)
mohamed
merci bcp chef
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>
Un complément d'information, utiliser le Responsive Web Design pour adapter la taille de le fenêtre à la résolution des écrans.
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
Essayer le code et vous verrez le bug de retour à la linge ou de décalage de la troisième Div.
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.