Discussion :

[Sergejack]

Comment avoir des div sur une même ligne sans utiliser float, tout en conservant les possibilités de contrôler les dimensions du div ? (avec display:inline, elles disparaissent)

[TigrouMeow]

Tu as essayé <SPAN> ? C'est l'équivalent de <DIV>, mais par défaut c'est pas géré comme un paragraphe. Cela dit, en fonction des attributs CSS les deux peuvent avoir le même comportement.

[Sergejack]

Tu as essayé <SPAN> ? C'est l'équivalent de <DIV>, mais par défaut c'est pas géré comme un paragraphe. Cela dit, en fonction des attributs CSS les deux peuvent avoir le même comportement.

le span ne respecte pas les contrôles de dimensions (width par exemple).

[Candygirl]

Pour quelle raison ne veux-tu pas recourir au float?
Quelle mise en page souhaites-tu obtenir?

Tu as aussi le positionnement absolu qui te permet de "mettre des div sur une même ligne" mais à utiliser dans des cas bien spécifiques.

[Sergejack]

Pour quelle raison ne veux-tu pas recourir au float?
Quelle mise en page souhaites-tu obtenir?

Tu as aussi le positionnement absolu qui te permet de "mettre des div sur une même ligne" mais à utiliser dans des cas bien spécifiques.

Je ne peux pas recourir au float, car j'utilise déjà du float pour les div parents (et les imbrications de float c'est n'importe quoi surtout avec du clear).

Sinon, je ne vois pas comment utiliser le positionnement pour mettre des divs de tailles non prédéfines les uns à la suite des autres sur une même ligne.

[Candygirl]

Je ne peux pas recourir au float, car j'utilise déjà du float pour les div parents (et les imbrications de float c'est n'importe quoi surtout avec du clear).

Perso j'imbrique souvent des float et je ne rencontre en général pas de problème insurmontable même si c'est parfois un peu prise de tête

Quelle mise en page souhaites-tu obtenir?

[Sergejack]

Quelle mise en page souhaites-tu obtenir?

Deux colonnes 1 et 2, côte à côte, occupant 50% de l'espace disponible chacune.

1 | 2

dans 1, 3 colonnes A B C sur une même ligne, leur hauteur est variable, leur largeur : 1/3 de 1. Toujours dans 1, une ligne D sous A, B, C.

ex :
1
AABBCC
AAB-CC
AA--CC
----CC
DDDDDD
DD

même topo dans 2.

Compatible IE/FireFox

[Candygirl]

dans 1, 3 colonnes A B C sur une même ligne, leur hauteur est variable, leur largeur : 1/3 de 1. Toujours dans 1, une ligne D sous A, B, C.

Encore une petite question:

Lorsque tu dis 1/3, tu dois donner des dimensions en % parce que le conteneur est extensible ou tu connais les dimensions et tu peux donc "calculer" toi-même le tiers en question pour les spécifier en pixels (ce qui évite de ce prendre la tête avec le calcul des % sur IE) ? (vu ton conteneur 1 qui prend le 50% de la place à disposition j'imagine que le % est requis mais je préfère m'en assurer pour éviter de complexifier au cas où )

[Sergejack]

Encore une petite question:

Lorsque tu dis 1/3, tu dois donner des dimensions en % parce que le conteneur est extensible ou tu connais les dimensions et tu peux donc "calculer" toi-même le tiers en question pour les spécifier en pixels (ce qui évite de ce prendre la tête avec le calcul des % sur IE) ? (vu ton conteneur 1 qui prend le 50% de la place à disposition j'imagine que le % est requis mais je préfère m'en assurer pour éviter de complexifier au cas où )

Les tailles sont relatives.
Je ne veux (et ne peux pas) considérer de calculs tels que "1 = 50%, A = (1/3) de 1 => A = 16.6%.
D'ailleurs les nombres et les mesures que j'ai donné, ne servent que d'exemples.

[Candygirl]

D'ailleurs les nombres et les mesures que j'ai donné, ne servent que d'exemples.

ok mais dur de donner une solution vraiment efficace sans connaître la donnée exacte du problème puisque cela va varier selon le cas.

Le premier problème rencontré va être le calcul des % sur IE. IE fait automatiquement un arrondi mathématique sans chercher à respecter les 100%. Du coup 2 éléments en 50% côtes à côtes passent correctement pour autant que l'espace à disposition dans le parent soit un nombre paire. Dans le cas contraire, il y aura 1px de trop; IE considera qu'il n'a pas la place de les mettre côtes à côtes et ils passeront l'un en dessous de l'autre.

Dans le cas particulier du 50/50, il est facile d'éviter le problème en redéfinissant pour IE une largeur de 49.99% pour l'un des 2 éléments (ne pas définir le 49.99% à tous car opera ne semble pas prendre en compte les décimales des %). de cette manière on évite l'apparition du .5 et donc du 1px de trop.

Pour un traitement plus général de la problématique, l'idéal est de laisser l'une des "colonnes" sans dimensions fixe afin qu'elle puisse "absorber" un éventuel écart. L'idée est de laisser la dernière colonne non pas en float, mais dans le flux et de la forcer à prendre sa largeur à l'aide d'un nouveau contexte de formatage plutôt qu'avec un margin qui imposerait un calcul ou encore pourrait poser problème si on a un clear à l'intérieur de ladite colonne.

Pour créer le nouveau contexte de formatage, on peut utiliser la propriété overflow:hidden (ou auto mais qui m'a semblé parfois poser des problèmes sur NS8) qui fonctionne bien sauf sur IE6 pour lequel il sera alors nécessaire de donner le layout. De plus, cette configuration fera apparaître le bug des 3px sur IE6 qui devra aussi être traité suivant le rendu souhaité.

Un petit exemple de ce que pourrait être le code pour ta configuration:

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!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=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
* {margin:0;padding:0;}
 
#gauche,#droite {width:50%;}
 
#gauche {
        background-color:#F99;
        float:left;
}
 
#droite {
        background-color:#FF6;
        float:right;
}
 
.a,.b {
        width:33.33%;float:left;
}
 
.a {background-color:#FC6;}
.b {background-color:#9FC;}
.c {
        background-color:#9F6;
        overflow:auto; /* crèe un nouveau contexte de formatage */
}
 
* html .c {
        height:1%; /* donne le layout à IE6-  => nouveau contexte de formatage */
        position:relative;left:-3px;margin-right:-3px; /* corrige le bug des 3px */
        overflow:visible;
}
 
.d {clear:both;background-color:#EEE;}
 
</style>
<!--[if IE]>
<style type="text/css">
#droite {
	width:49.99%;
}
</style>
<![endif]-->
</head>
<body>
<div id="gauche">
  <div class="a">
    <p>Paphius</p>
  </div>
  <div class="b">
    <p>Nihil morati post haec militares avidi saepe turbarum adorti sunt Montium primum, qui divertebat in proximo, levi corpore senem atque morbosum</p>
  </div>  
  <div class="c">
    <p>Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica versantur;</p>
  </div>
  <div class="d">
    <p>Quod opera consulta cogitabatur astute, ut hoc insidiarum genere Galli periret avunculus</p>
  </div>
</div>
<div id="droite">
  <div class="a">
    <p>Paphius</p>
  </div>
  <div class="b">
    <p>Nihil morati post haec militares avidi saepe turbarum adorti sunt Montium primum, qui divertebat in proximo, levi corpore senem atque morbosum</p>
  </div>  
  <div class="c">
    <p>Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica versantur;</p>
  </div>
  <div class="d">
    <p>Quod opera consulta cogitabatur astute, ut hoc insidiarum genere Galli periret avunculus</p>
  </div>
</div>
</body>
</html>

[Sergejack]

Houla, je ne connais pas tous ces "hacks" ^^'

Merci, je vais pouvoir les étudier.