Discussion :

[pierrot10]

Bonjour,
je métrise pas encore à 100% le CSS surtout en matière de <DIV>
Voici ma structure et mon problème

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
 
<div id="body">
<div id="global">
<div id="gauche"></div>
<div id="droit"></div>
</div>
[...]
d'autre div...
[...]
</div>

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
 
#body{
margin-left:auto;
margin-right:auto;
position relative;
height:589px;
width:770px;
}
#body #global{
position:absolute;
padding: 0px 0px 0px 0px;
width:100%;
bottom:17px;
border:1px solid #cccccc;
 
}
#body #glogal #gauche{height:300px;position:absolute;}
#body #glogal #droit{heigth:300px;position:absolute;}

J'ai besoin que les <div>s gauche et droit soit toujours a coté et pas dessous ou dessus et respectivement il fasse chaqu'in 50% de largeur.

L'autre difficulté, c'est que sur certaine page, une image ce place dans le <div id="gauche", et dans d'autre page, un eimage se place dans le <div id="droit">, et que cette image fait env. 60% de largeur. Il faudrait que lorsque le <div> contenant la photo, "pousse" le deuxième <div> de manière a ce qu'il fasse plus que 40% de largeur. (j'utilise un CMS)

Un peu comme si j'utilisais un tableau avec une largeur de 100%, sans définir les largeurs des deux cellules le constituant

Code :

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

1
2
3
4
5
6
7
 
<table width="100%">
<tr>
<td>gauche</td>
<td>droit</td>
</tr>
</table>

Merci pour votre aide

[Mystic'Angel]

Tout d'abord, je te conseille de préciser leur nombre de pixels à tes div et à tes images au lieu du 100%.
Car si tu met 100%, tu demandes aux Div de s'étendre au maximun sur la page alors qu'il te faut que quelques pixels.
Impose par nombre de pixels ce qu'il te faut pour chacun des div. (exemple: width:230px; ) et ton div saura jusqu'ou s'étendre.
Meme chose pour tes image.

Au fait, je crois que le # devant "body" est inutile, d'ailleurs y'a pas besoin de faire un div pour le body.


et t'as oublier les 2petits points devant "position".

[pierrot10]

Oui attention, excusez moi pour la confusion, le #body, est un <div id="body">, mais il ne correspond pas a la balise body. Ok, j'aurais pu donner un autre nom ,

Oui, je devrais pas mettre width:100%, mais si je définis une largeur en pixel, es-ce que sera flexible en fonction du contenu de son <div> voisin?

[Mystic'Angel]

Moi ce que je fais c'est un calcul, tu mets a proximativement la largeur que tu veux ensuite si c'est trop large ou trop petit, tu reduis le nombre de pixels.

par exemple j'ai créer un site ou mes 3 div sont alignés: menu droit, contenu, menu gauche.

Code :

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

1
2
3
4
 
#menugauche{width:230px}
#contenu{width:500px}
#menudroit{width:230px}

J'ai créer les 2 menu d'abord pour ensuite ajuster la dimension du contenu par rapport au 2 autres.

En gros, je fais tout manuellement, j'ai pas fais en sorte que ce soit flexible, j'ai pas laisser les div se redimensionner automatiquement parce que me prend la tete lol. Si tu trouve l'astuce tant mieux
Mais pour l'instant j'fais les dimension moi meme sinon c'est le bordel. Au moins avec des dimensions imposées tout est clair.

[pierrot10]

oui mais comment faire pour les deux <div> (gauche et droit) soient toujours sur la meme ligne, soit les uns a coté de l'autre. Car meme si je donne une largeur de 10px au deux, ils se placent toujours l'un dessous l'autre

Ceci dit, j'ai le meme css pour 4 pages. Sur deux pages, générées par un CMS, le <div> de gauche prendra une larheur de 440px alors que celui de droite aura une largeur de 330px. Je peux pas mettre dans mon CSS que le <div> de gauche à un width:330px, alors que dans la deuxième page.html, il prendra une image de 440px de large.

non?

[trotters213]

Modifie ton <div id="body"> par <div id="contenu"> car ça va t'apporter de la confusion et rien d'autre de l'appeler body.
Ensuite essaie ceci tout simplement :

Code :

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

1
2
3
4
5
6
7
8
9
#contenu {
width:800px;
}
#gauche {
float:left;
}
#droite {
float:right;
}