imbriquer des div

**stefcio** · 30/12/2008, 13h55

bonjour

je fais appel à vos lumières car je rencontre un petit problème:

voilà dans mon fichiers css j'ai quelque chose comme ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
body { background:#2b2b2c;}
 
 
#truc {
	background: #fff;
	width: 960px;
 
}
 
#machinegauche {
       width:250px;
       float:left;
}
 
#machinedroit {
      width:600px;
      float:rigth;
}

dans ma page html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<body>
<div id="truc">
<div id="machinegauche">
du texte
</div
<div id="machinedroit">
du text
</div>
</div>
</body>

pourquoi j'ai une bande de la couleur de body entre machinegauche et machine droit?

Merci d'avance pour vos réponses

désolé si la question est déjà posé mais je n'ai pas trouver de réponse en cherchant!!!

Stéph

**GihefBey** · 30/12/2008, 16h24

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#truc             width: 960px;
- #machinegauche  width: 250px;
- #machinedroit   width: 600px;
_________________________________
 
=                        110px         de blanc

la couleur background: #fff; de #truc.

Enfin, si ton code ne contenait pas d'erreur </div> et si tu n'avais pas oublié quelque chose dans l'utilisation de float.

Essaye, par exemple,

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<body>
  <div id="truc">
    <div id="machinegauche">
      du texte
    </div>
    <div id="machinedroit">
      du texte
    </div>
    <div class="separ"></div>
  </div>
</body>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
body {
background-color: #2b2b2c;
  }
 
#truc {
background-color: #fff;
/*  width: 960px;*/
width: 850px;
  }
 
#machinegauche {
  width: 250px;
  float: left;
background-color: #faa;
  }
 
#machinedroit {
/*  width: 600px;
  float: rigth;*/
margin-left : 250px;
background-color: #aaf;
  }
 
.separ {
clear : left;
  }

-

**stefcio** · 30/12/2008, 18h01

Merci pour ta réponse si clair

en fait mon post est un résumé de ma css qui commence à être un poil grand maintenant

en fait si je corrige comme tu me le propose tout roule
en fait j'avais résolue le problème de différence avec un padding de la différence

Et je rappelle que la couleur entre les deux n'est pas cellle de truc mais bien de body, et il est là le pb

maintenant le pb est en bas,
je voudrais que le fond en bas soit blanc (couleur de #truc) de manière homogène sans escalier dépendant du texte de chaque balise...

Je suppose que le problème est le même mais la correction est plus galère car le texte de machinedroit change donc sa longueur

j'avais mis un height 2000px dans #truc pour corriger mais lorsque le texte est petit je me retrouve avec un pied de page tout blanc pour rien...

Aurais tu une solution

**Erwan31** · 30/12/2008, 18h26

Bonsoir,
comme tu as un div de dégagement (clear:left) en bas, le bloc truc devrait englober tes 2 div donc il y a peut-être autre chose dans ta css qui fait tout capoter. Tu devrais fournir la TOTALITE de tes code CSS et XHTML.
N'oublie pas de préciser sur quels navigateurs tu as ce problème.
Au lieu d'ajouter un div vide, ajoutes un overflow:hidden à truc pour établir un contexte de formatage bloc (en) et permettre à truc d'englober le div gauche flottant (plus celui de droite puisqu'avec la méthode de GihefBey il retournes en flux normal).

**GihefBey** · 30/12/2008, 22h37

Il est possible que tu parles de colonnes de hauteurs égales.
Par CSS ça ne se fait pas.
Il faut s'y prendre autrement.

Vois :
http://alistapart.com/articles/fauxcolumns/

-

**stefcio** · 30/12/2008, 23h00

Je n'avais pas essayé avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
.separ {
clear : left;
  }

ça marche nickel
je vais maintenant essayer de comprendre l'utilité de cette balise

un grand MERCI pour votre aide

un forum de+ que je dois surveiller pour savoir si je peux aider qq'un autre

**Erwan31** · 30/12/2008, 23h10

Envoyé par stefcio

Je n'avais pas essayé avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.separ {
clear : left;
  }

ça marche nickel
je vais maintenant essayer de comprendre l'utilité de cette balise

Ce n'est pas une balise mais une propriété CSS

J'ai l'impression que tu as zappé mon post non?

**stefcio** · 30/12/2008, 23h48

non Erwan31 je n'ai pas zappé ton post

justement c'est grâce à ton post que j'ai essayé le "clear"

l'explorateur sur lequel je suis c'est FF (linux oblige

)

maintenant je vais me pencher sur ta proposition overflow:hidden

Encore merci

imbriquer des div

CSS

Discussions similaires

Partager

Partager