Repositionnement d'un block floatant

**lordmyko** · 04/05/2010, 14h49

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 css :

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

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.

**Nesmontou** · 05/05/2010, 23h21

Bonsoir,

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

Tu peux essayer le code suivant :

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
<!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

**lordmyko** · 06/05/2010, 08h49

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.

Repositionnement d'un block floatant

CSS

Discussions similaires

Partager

Partager