Repositionnement d'un block floatant

Version imprimable

04/05/2010, 14h49
lordmyko

Repositionnement d'un block floatant
Bonjours a tous,

J'aurais besoin d'un petit coup de pouce et surtout de savoir si ce que je voudrai faire est possible en css ou non.

Voici mon problème :
J'ais un block flotant a droite et séparé par une marge de 40px du bord droit du navigateur. Donc tous simplement un élément <div> possédant les propriétés :
Code:

1 2 3 4 width:500px; height:120px; float:right; margin-right:40px;
Lorsque je rétréci le navigateur jusqu'au maximum, le block reste bien à droite et conserve parfaitement sa marge et disparait par la gauche lorsque l'espace est insuffusant (en conservant la marge).
Ce que je voudrais, c'est qu'une fois que le bord gauche du block touche le bord gauche du navigateur, il se fixe et continu de se réduire mais par la droite en commençant par supprimer la marge de 40px.

Je vous demande donc si cela est réalisable en css et si oui comment.

J'ais essayé d'être le plus clair possible mais si vous ne comprenez pas un poind que j'aurais mal expliqué, n'hésité pas a me questionner.
Merci d'avance à tous ceux qui tenteront de m'aider.

Bonsoir,

A froid, je pense que la propriété min-width pourrait t'aider.

Tu peux essayer le code suivant :

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
<!DOCTYPE html>
<html>
	<head>
		<title>Test</title>
 
		<style type="text/css">
			body, html {
				font: normal normal normal 11px/20px Verdana, sans-serif;
				height: 100%;
				margin: 0;
				padding: 0;
				width: 100%;
			}
 
			#container {
				min-width: 540px; /* Egal à la largeur du bloc + la marge de droite */
			}
 
			#container #right {
				background: red;
				float: right;
				height: 120px;
				margin-right: 40px;
				width: 500px;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="right">Texte</div>
		</div>
	</body>
</html>

J'ai testé sous FF3, Chrome 4 et IE7.

Bon développement ;)

Nesmontou

06/05/2010, 08h49
lordmyko

La solution que tu proposes correspond parfaitement et la propriété min-width est déjà présente dans le projet donc aucun soucis. Merci pour cette réponse.