div float nowrap

Version imprimable

div float nowrap

Bonjour,

Je pensais avoir un problème simple mais en fait après plusieurs heures de tests et recherche sur internet je n'arrive pas à trouver...

J'aimerai aligner plusieurs div sur la même ligne, à l'intérieur d'une div conteneur et que les div contenus "en trop" soit masquées...

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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 
<style type="text/css">
  .box {
 
    width: 100px;
    border: 1px solid #BABABA;
    background-color: #ddd;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 10px;
    float:left;
    display: inline;
 
  }
 
  .container {
 
  width:300px;
  overflow:hidden;
  border: 1px solid #BABABA;
  padding : 5px;
  }
 
 
</style>
</head>
<body>
 
 
<div class="container">
	<div class="box">
 
	  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
	  semper sagittis velit. semper sagittis velit. 
 
	</div>
	<div class="box">
 
	  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
	  semper sagittis velit. semper sagittis velit. 
 
	</div>
  	<div class="box">
 
   	 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
   	 semper sagittis velit. semper sagittis velit. 
 
  	</div>
</div>
 
 
</body>
</html>

En fait sous IE comme sous FF, la 3ème div retourne à la ligne...
J'aimerai quelle soit masquée car je compte la faire défiler comme un carroussel...

11/05/2009, 16h42
Erwan31

Bonjour,
qu'elle retourne à la ligne c'est normal puisque tes 3 div ont des border latéraux qui s'additionnent aux 100px, soit 100 X 3 + 1px X 6 = 306px.

Pour masquer ta dernière DIV, il faut lui attribuer un visibility:hidden ou alors un display:none pour l'extraire du rendu.
11/05/2009, 17h52
gribo

Merci pour votre réponse.

Le problème est que mes div sont générées par JSP et qu'elles ne savent pas si elles seront cachées ou pas...
Je pensais que la div conteneur était capable de me les masquer...

Pour la 3ème div, j'ai en plus besoin qu'elle apparaisse à 80% car il y aura un bouton à droite qui fera défiler les divs vers la gauche... donc je ne veux pas utiliser display:none...
11/05/2009, 19h19
Erwan31

Ok je comprends mieux.
Oui l'overflow:hidden doit masquer ce qui excède la surface du conteneur
mais cela n'empêche pas ses div enfant flottant d'avoir besoin de la largeur suffisante pouvoir s'afficher côte-à-côte sans que le dernier soit poussé sous le 2ème div.
Pour éviter cela tu dois sortir le dernier div du flux normal grâce à un positionnement absolue pour qu'il ne soit pas pris en compte dans la largeur additionnée des 3 block et passer le block container en position:relative pour que le block enfant en absolue soit cloisonné dans le niveau d'affichage de son parent relatif et que l'overflow:hidden puisse prendre ainsi effet:

Donc ajouter position:relative à #container
et position:absolue; left:269px (pour Opera dont le comportement n'est pas standard ici) au dernier des 3 block.
12/05/2009, 16h24
gribo

OK, merci beaucoup d'avoir pris le temps pour cette réponse éclairée.
Je vais essayer.
L'inconvénient que j'y vois est qu'il faut connaitre la position absolue du dernier hors dans l'idéal mes blocs enfants autont des tailles variables en fonction du contenu... Mais en JS je dois pouvoir calculer les tailles de chaque bloc et potionner le(s) dernier(s) en absolue....

Sinon en attendant j'ai mis mes blocs enfants dans une table, une td par bloc et la ça fonctionne parfaitement.... sauf que l'ergonome du projet est allergique aux tables :mrgreen: