Bloc fixe gauche et variable droit

vaneck · 21/03/2011, 22h45

Bonjour.
Voici mon code html

Code :

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

1
2
3
<div id="blocgauche"></div>
<div id="blocdroit"></div>
<div id="blocbas"></div>

Je recherche a ce que les blocs gauches et droit occupent la totalité horizontale de l’écran, et que le bloc bas se place en dessous.
Le bloc gauche ayant une valeur fixe, width:600px le bloc droit doit donc occuper la totalité de l'espace horizontale qui reste.
Jusqu'ici , c'est faisable.
Mais voila qu'arrive LA subtilité. Le blocbas doit être immédiatement en dessous de ces 2 blocs, et doit occuper aussi la totalité de l'espace horizontal. Du coup , le 2 blocs au dessus de luis doivent rester dans le flux pour qu'il sache ou se positionner, et fout en l'air ma solution a base de position:absolute !
Ça me semble impossible , mais avant que je sorte la grosse artillerie JS, quelqu'un aurait peut être une idée miracle?
merci de votre aide!

nadox · 21/03/2011, 22h53

Bonsoir,
quelque chose comme (pas testé):

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
#blocgauche
{
width: 600px;
float: left;
}
#blocdroit
{
float:left;
}
#blocbas
{
clear:left;
}

devrait pouvoir faire l'affaire, non ?
EDIT : après avoir fait un petit test, quelque chose comme ça fonctionne :

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
<html>
<head>
 
<style type="text/css">
#bloccentre{
	width: 100%;
}
#blocgauche {
	border: 1px solid red;
	width: 600px;
	float: left;
}
#blocdroit {
	border: 1px solid red;
}
#blocbas {
	border: 1px solid red;
}
</style>
</head>
<body>
<div id="bloccentre">
	<div id="blocgauche">gauche</div>
	<div id="blocdroit">droit</div>
</div>
<div id="blocbas">bas</div>
</body>
</html>

re-EDIT :
Bien entendu il s'agit plus d'une piste que d'un code valable pour tout usage.
Tu n'as pas un petit dessin de ce que tu veux obtenir ?

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email