float et redimensionnement de la fenêtre

**Heliodromel** · 26/09/2007, 16h51

Bonjour à tous,

Je dispose de deux blocs positionnés l'un à coté de l'autre grace à la propriété:

Code css :

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

float:left;

Lorsque je réduis la fenêtre du navigateur, le deuxième bloc perd son alignement et vient se positionner sour le premier bloc.

Ce comportement semble logique puisque n'ayant plus assez d'espace pour être placé à droite du premier bloc, le deuxième bloc n'a d'autre choix que de se pacer au dessous.

Ma question est donc la suivante : Comment éviter ce comportement ?

Je souhaiterais que quoiqu'il arrive à la fenêtre du navigateur ces deux blocs restent alignés l'un à côté de l'autre...tel l'aurait fait un tableau en fait.

**sidahmed** · 26/09/2007, 19h03

Bonsoir,

j'ai essayé ces scripts, ça marche très bien :
contenu.html

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
<!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>
	<title>Bonsoir</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" media="screen" type="text/css" title="design" href="design.css" />
<body>
 
	<div id="menu">
		<h2>Titre 1</h2>
		<p>
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
	    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		<p>
		<h2>Titre 2</h2>
		<p>	
		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
		</p>
		<h2>Titre 3</h2>
		<p>
		cccccccccccccccccccccccccccccccccccccccc
		cccccccccccccccccccccccccccccccccccccccc
		cccccccccccccccccccccccccccccccccccccccc
		cccccccccccccccccccccccccccccccccccccccc
		cccccccccccccccccccccccccccccccccccccccc
		</p>
	</div>
 
	<div id="corps">
		<h2>Titre 1</h2>
		<p>
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
	    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		<p>
		<h2>Titre 2</h2>
		<p>	
		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
		</p>
		<h2>Titre 3</h2>
		<p>
		cccccccccccccccccccccccccccccccccccccccc
		cccccccccccccccccccccccccccccccccccccccc
		cccccccccccccccccccccccccccccccccccccccc
		cccccccccccccccccccccccccccccccccccccccc
		cccccccccccccccccccccccccccccccccccccccc
		</p>
	</div>
</body>
</html>

design.css

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
body
{	
       width: 760px;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 0.8em;
	font-family: Verdana, "Trebuchet MS", "Times New Roman", serif;
	color: black;
}
/************************************************/
#menu
{
	width: 350px;
	float: left;
	border: 1px solid blue;
	padding: 5px;
	margin-bottom: 20px;
}
 
/************************************************/
#corps
{
	margin-left: 370px;
	border: 1px solid blue;
	padding: 5px;
	margin-bottom: 20px;
}
}
/************************************************/

Bon courage.

**Heliodromel** · 27/09/2007, 08h57

Salut Sidahmed,

merci pour ta réponse !

En effet, ton exemple fonctionne à merveille malheureusement cela oblige à donner des taille fixes aux blocs.

J'aurais voulu garder l'un des deux blocs extensible mais je m'arrangerai, merci encore.

float et redimensionnement de la fenêtre

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager