Avoir deux blocs principaux, un de taille fixe à droite, celui de gauche qui s'adapte

**estmars** · 15/09/2011, 14h37

Bonjour, j'ai l'image "one" en pièce jointe, je voudrais avoir la "two".

En français, j'ai un bloc général (en vert mais on s'en fout de lui)

j'ai deux blocs principaux, le rouge, et le bleu.

Le bleu est à droite est a une taille fixe, j'ai mis par exemple, 300px.

Le rouge contient des vignettes, et il doit selon le nombre aléatoire de vignettes (et selon les différentes résolutions d'écrans), occuper toute la largeur restante, c'est à dire la largeur totale de l'écran moins les 300px du bloc bleu.

Il faut qu'ils soient à coté, et là j'ai le bloc bleu qui redescend. :/

je vous ai laissé des captures d'écran de ce que j'ai et ce que je voudrais, et voici le code que vous pouvez directement intégrer dans une page html pour y voir avec plus d'aisance.

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
<html><head></head>
 
<body>
 
<style>
 
	#main_content{float:left;width:100%;background-color:green;}
 
	#content1{
		float:left;
		background-color:red;
		min-height:400px;
	}
 
	#content2{
		float:left;
		width:300px;
		height:400px;
		background-color:blue;
	}
	.images{
		float:left;
		width:160px;
		height:120px;
		background-color:yellow;
		border:1px solid;
	}
 
</style>
 
<div id="main_content">
 
	<div id="content1">
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
	</div>
	<div id="content2"></div>
 
</div>
 
</body>
 
</html>

En vous remerciant.

Invité · 15/09/2011, 20h37

Bonjour,
le plus simple : mettre content2 DANS content1, et en float:right;

Code :

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

1
2
3
4
5
6
	#content2{
		float:right;
		width:300px;
		height:400px;
		background-color:blue;
	}

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
	<div id="content1">
		<div id="content2"></div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
	</div>

**estmars** · 16/09/2011, 11h11

Merci !

ça produit bien le résultat escompté.

Par contre, j'aurais eu tendance à mettre le div #content2 à la fin des images vu que dans notre logique humaine, on le met à droite, comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div id="content1">
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div class="images">a</div>
		<div id="content2"></div>
	</div>

Eh bien apparemment ça ne marche pas, donc je reprends ton exemple. On dirait que le premier élément en float réserve la ligne.

Bonne journée et merci !

Invité · 16/09/2011, 11h15

Bonjour,
en tout cas tu as essayé, c'est bien.
Ca prouve que tu es curieux. Et la curiosité aide à progresser !

**estmars** · 16/09/2011, 15h37

Merci

Avoir deux blocs principaux, un de taille fixe à droite, celui de gauche qui s'adapte

CSS

Discussions similaires

Partager

Partager