Comment positionner 3 bloque a l'horizontal dont 2 une largeur fixe

**pierrot10** · 25/01/2008, 11h39

Bonjour,
Aprews mille tentatives, je viens a vous.
J'ai 3 bloques

Code :

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

1
2
3
4
 
<div id=1></div>
<div id=2></div>
<div id=3></div>

Les bloques 1 et 3 doivent avoir une largeur fixe alors que le bloque 2 a un largeur doit avoir une largeur qui dependra de la fentre (s'élargit avec la fenetre)

Pour cela j'ai fait

Code CSS :

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

1
2
3
 
#1, #2{width:100px;}
#1, #2, #3{ float:left;}

Ceci ne marchera pas car le div id=2 a par defaut 100% de largeur

Ja'iemerais faire que le div 2 aie 100% - div 1 et 3.

Comment puis je faire ceci?
Merci

**pierrot10** · 25/01/2008, 11h42

En plus de cela, quand je diminue mon browser en largeur, il faut pas que le div 3 passe dessous le div2, il faut qu'un scroll barre vienne

PS: J'aimerais eviter d'utiliser des tableau

**pop_up** · 25/01/2008, 12h08

un truc 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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />		
    <style type="text/css">
 
        DIV#droite{
        float: right;
        width: 201px;
        background-color: blue;
    }
        DIV#gauche {
        margin: 0;
        padding: 0;
        width: 200px;
        float: left;
        background-color: red;
    }
        DIV#milieu {
        padding: 0;
        overflow: auto;
        background-color: yellow;
    }
    </style>
</head>
<body>
    <div id="droite">bloc3</div>
    <div id="gauche">bloc1</div>
    <div id="milieu">bloc2</div>
 
</body>
</html>

il faut ajouter un correctif pour ie je pense en mettant zoom:1; sur le div ayant l'overflow:auto

**pierrot10** · 25/01/2008, 14h38

cool merci, j'étais pas loin, Ca joue

mais dit moi encore un truc,

Je n'utilise pas cette maniere d'écrire

DIV#droite

avec le DIV avant,

Qu'es ce qu'il fait ce div?

**pop_up** · 25/01/2008, 14h41

DIV.classe1 agira uniquement sur les DIV associés à cette classe et non par sur un élément du type <p class="classe1">

.classe1 agira sur tous les éléments qui sont associés à cette classe

voila

**pierrot10** · 25/01/2008, 14h44

Oui oui,
j'y ai pensé juste après

je fais comme ceci

Code :

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

div #droite{}

C'est donc la meme chose, n'est pas?
ou alors il y a une inportance dans le DIV en majuscule?

**pop_up** · 25/01/2008, 14h51

les majuscules ne changent rien

**pierrot10** · 25/01/2008, 14h56

Merci pour tes réonses

**Candygirl** · 25/01/2008, 16h33

Envoyé par pierrot10

Code :

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

div #droite{}

C'est donc la meme chose, n'est pas?

non, c'est différent à cause de l'espace entre le div et le #. Là, tu cible n'importe que élément comportant l'id droite et descendant d'un div. En imaginant, par exemple, que ton #droite soit enfant du body, ce sélecteur ne correspondra alors à rien sur ta page.

**pop_up** · 25/01/2008, 22h14

effectivement j'avais pas fait gaffe à l'espace. bien joué candygirl

**pierrot10** · 26/01/2008, 09h09

Salut merci poour ta reponse mais je n'ai pas trop cpmpris l'impact de DIV#droit.

DIV .droit{}

agira sur tous les .droit descendant d'un div,

maid div.droit???? qu'esce que ca fait exactement?

**pop_up** · 26/01/2008, 09h16

quand tu écris :

Code :

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

1
2
 
DIV.droit

Tous les DIV ayant la classe "droit" seront concernés
exemple d'élément concerné

Code :

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

<div class="droit"> blabla </div>

exemple d'élément non concerné

Code :

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

<div><p class="droit"> blabla </p></div>

ici, meme si la classe "droit est défini, la déclaration spécifie de ne pas agir sur un paragraphe ayant cette classe mais seulement sur un div ayant cette classe.

Quand tu écris :

Code :

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