[CSS] faire deux colones dans un div

Version imprimable

23/06/2006, 22h32
julien.63

[CSS] faire deux colones dans un div

salut,
J'essai de décrocher de la mise en page tableau mais je ne maitrise pas encore vraiment le css.
je voudrais placer un calque(1) qui contient en contient deux autres (2 et 3) l'une à coté de l'autre.
Le contenu de 2 et de 3 peut varier c'est pourquoi j'utilise position:relative pour 2 et 3 (avec absolute, ils peuvent dépasser en bas).
Mon souci c'est que j'ai du mal à placer le 3.
Ma question est : est ce que le positionnement relatif se fait toujours à partir de calque précédent ou est ce qu'on peut spécifier le calque de référence?
merci pour vos conseils
Julien
23/06/2006, 22h39
psychoBob

Ce sont les propriétés float: left et float:right qu'il faut utiliser respectivement pour tes blocs à gauche et à droite à l'intérieur de l'élément parent.

Et si ça tiens pas, peut être en rajouter un troisième en dessous des deux, avec les propriétés width:100% et

la propriété c'est clear:both
23/06/2006, 23h27
julien.63

oui ça fonctionne bien :D , mes deux div (2 et 3) sont bien placés.
mais le souci c'est que le div 1 qui n'englobe pas les deux autres.
23/06/2006, 23h33
psychoBob

files ton code css et html.
23/06/2006, 23h52
<romain/>

tu mes les 2 et 3 en float left et tu en rajoute un 4eme en float left egalement mais avec un clear:both en plus...

Les 3 sont mis dans le bloc 1 et voila ;);)

code html (j'ai éclaircit pour que cela soit plus clair) :
j'ai un div principal qui contient tous les autres id=content
* ensuite deux div: un à gauche (box_left) et un à droite (box_right)
* et div id="ref_map" qui se situe à l'angle supérieur gauche de box_left
* et enfin div class="map_loading" qui se situe au centre de box_left

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
 
	<div id="content">
	<? php ?>
<div class="map_loading" id="loading" style="display:none"><br>Please wait<br><img src="images/loadingbar.gif"><br></div>
	<div id="ref_map" class="map_ref_map" <? echo $ref_map_display; ?>><img src="/tmp/<? echo $ref_name; ?>" border="1"></div>
	<div class="map_ref_map_cross"><a href="#" onclick="hideShowRefMap()"><img name="cross" <? echo $cross_src; ?> width="10"  ></a></div>
 
 
	<div id="box_left">
	<!--<div id="map_main">-->
	<input type="image" class="map" border="0"  name="img" id="img" src="/tmp/<? echo $image_name; ?>" usemap="#bird">
 
	<p id="map_footer">
	<strong>Map Extent:</strong> <?php echo $new_extent; ?> - <strong>Map scale:</strong> 
	</p> <!--end of map_footer-->
	<p id="map_footer">
	scale
	</p> <!--end of map_footer-->
	</div> <!-- end of box_left -->
 
 
	<div id="box_right">
	 <p><input type=submit name="refresh" value="Draw"></p><hr>
	<p><strong><a href="#" onclick="hideShow('tools',0)">Tools</a></strong></p>
	<hr>
	<p><strong><a href="#" onclick="hideShow('layers',0)">Layers</a></strong></p>
	<hr>
	<p id="p_menu1"  style="display: block"></p>
	<p id="p_menu2" style="display: none"></p>
	<p id="p_menu3"  style="display: none"></p>
	</div> <!--end of right_box-->
</div><!--end of content-->

le code css :

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
#content {
 background-color:blue;
 margin: 0;
 padding: 10px 10px 100px 10px;
 height:100%;
}
 
#box_left{
	float: left;
	width: 590px;
	z-index:0;
}
 
#box_right{
	background-color: white ;
	float:right;
	width:180px;
	border:solid 1px black;
	text-align: center;
	font-size: 12px;
	font-family: arial;
}
 
#map_main {
	background-color: #E7E4E4 ;
	position: relative;
	width: 590px;
	height: 400px;
	z-index:0;
}
 
#map_menu {
	background-color: white;
	position: relative;
	width: 180px;
	border:solid 1px black;
	text-align: center;
	font-size: 12px;
	font-family: arial;}
 
#map_footer {
	top:8px;
	width: 590px;
	border:solid 1px black;
	text-align: center;
	font-size: 10px;
	font-family: arial;
}
 
.map_loading {
	text-align:center;
	position: absolute;
	background-image:url("../images/green_square.png");
	top: 160px;
	left:195px;
	width: 200px;
	height: 80px;
	border:solid 2px black;
}
 
.map_ref_map{
	float: left;
	top:5px;
	left:5px;
}
 
.map_ref_map_cross{
	z-index:10;
	position: absolute;
	top:5px;
	left:5px;
}

merci d'avance de votre aide car c'est vraiment la pagaille... :(
Julien

27/06/2006, 09h10
Thomus38

Citation:

Envoyé par <romain/>

tu mes les 2 et 3 en float left et tu en rajoute un 4eme en float left egalement mais avec un clear:both en plus...

Les 3 sont mis dans le bloc 1 et voila ;);)

Ok, ça marche quand tu n'a que du texte! Car moi la j'ai une photo dans le 2 et du texte dans le 3 et le 4 qui à juste clear:both en plus comme tu as dit (le tout englobé dans 1).
Résultat, ma photo dépasse du cadre 1... Comment faire pour que 1 s'adapte en fonction de ce qu'il y a dans 2 et 3 (même si c'est des images!!!)

Merci ! :P
27/06/2006, 15h27
julien.63

moi aussi j'ai une image dans la boite 2, ça fonctionne.
est ce que tu as precisé width et height dans ta feuille de style? Si oui essaye sans.

ben écoute, j'ai fait ça ouais regarde :
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 #contenu .cadre1 { /*width: 100%;*/ margin-bottom: 20px; border: 2px solid black; font-family:arial; color:black; } #contenu .cadre1 .2 { float:left; text-align:left; padding:4px; } #contenu .cadre1 .3 { text-align:justify; font-size:12px; padding:5px; } #contenu .cadre1 .4{ float:left; clear:both; }
Sous IE, pas de problème mais sous FF, l'image dépasse du cadre 1 (alors que l'image est dans le cadre2 qui est censé etre dans le cadre1 !!)

28/06/2006, 14h24
Thomus38

Pour une fois que IE est gentil et FF est méchant