imbriquer des div

Version imprimable

imbriquer des div

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:

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:

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

Bonjour,

Code:

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:

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:

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

30/12/2008, 18h01
stefcio

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 :)
30/12/2008, 18h26
Erwan31

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).
30/12/2008, 22h37
GihefBey

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/

-
30/12/2008, 23h00
stefcio
Je n'avais pas essayé avec
Code:

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 :)
30/12/2008, 23h10
Erwan31
Citation:
Envoyé par stefcio

Je n'avais pas essayé avec

Code:

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?
30/12/2008, 23h48
stefcio

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