Faire prendre à un div la place restante

**francky74** · 24/02/2015, 23h18

Bonjour,

J'ai trois <div> insérés dans un <header>.
Je souhaite que les trois div soient côte à côté, que ceux de gauche et de droite aient 80px de large, et que celui du milieu penne le reste de la place.

Mon problème si situe surtout pour le div du milieu, comme vous pouvez le voir sur cette copie d'écran :
Nom : divH.png
Affichages : 941
Taille : 2,2 Ko

Nom : divH.png
Affichages : 941
Taille : 2,2 Ko

Voici mon index.php :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="styles/style.css"/>
        <title>Mon site</title>
    </head>
 
    <body>
 
    <?php include("structures/entete.php"); ?><br /><br /><br />
 
    </body>
</html>

voici mon entete.php :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<header>      
	<div id="d1">
		<p>div1</p>
	</div>      		
	<div id="d2">
		<p>div2</p>
	</div>      	
	<div id="d3">
		<p>div3</p>
	</div>
</header>

et voici le style.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
@CHARSET "UTF-8";
header
{
	border: 3px blue dashed;
	margin-top:20px;
	margin-left:40px;
	margin-right:40px;
}
#d1
{
	display:inline-block;
	border: 3px yellow dashed;
    width: 80px;
    float:left;
}
#d2
{
	display:inline-block;
	border: 3px green dashed;
	width: auto;
}
#d3
{
	display:inline-block;
	border: 3px red dashed;
    width: 80px;
    float:right;
}

Ce qui m'embête, c'est que pour la propriété width, on a le choix entre des px, des % ou auto. Etant donné que j'ai mis des px pour les div1 et div3, il m'est difficile de connaître la taille à donner au div2, que ce soit en px ou en %. Quant à auto, cela ne fait rien ....

Merci pour vos aides !

**CCyrillus** · 24/02/2015, 23h28

hi,
tu as aujourd'hui a dispos 2 option via display: table ou flex :
exemple http://codepen.io/anon/pen/KwRGOB
CSS pour ta structure au choix (ajout d'une class tb ou flex dans header

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
/* base style */
#d1 ,
#d3 {
  width:80px;
  outline:dotted green
}
#d3 {
  outline:dotted red;
}
#d2 {
  outline:dotted blue
}
/*table */
.tb {
  display:table;
  width:100%;
}
.tb > div {
  display:table-cell;
}
/* flex */
.flex {
  display:flex;
}
.flex #d2 {
  flex:1;
}
 
div {/* pour voir */
  box-shadow:inset 0 0 0 1px;
  text-align:center;
}

**francky74** · 24/02/2015, 23h32

Super merci !

Je vais me renseigner sur ces deux types de display

**francky74** · 25/02/2015, 12h47

Bonjour,

Après m'être renseigné sur les display:table et les display:flex, je constate que les table sont plus rapide que les flex sur tous les navigateurs.
De plus ils nécessitent moins de css que les flex.

à lire :
http://benfrain.com/css-performance-...s-table-fight/

**NoSmoking** · 25/02/2015, 19h00

Bonjour,
tu peux également faire un truc de façon traditionnel, un float:right + float:left + flux

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<div class="header">
  <div id="droite">
    droite
  </div>
  <div id="gauche">
    gauche
  </div>
  <div id="centre">
    centre
  </div>
</div>

avec le CSS suivant par exemple

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
html,
body,
.header{
  margin:0;
  padding:0;
  height:100%;
  min-height:100%;
}
.header > div {
  min-height:100%;
}
#gauche,
#droite{
  width:80px;
  background:#bcd;
}
#droite{
  float:right;
}
#gauche{
  float:left;
}
#centre {
  background:#def;
}

Faire prendre à un div la place restante

CSS

Vue hybride

Discussions similaires

Partager

Partager