blocs cote à cote

**sebhm** · 15/02/2009, 14h52

Bonjour,

je pense que j'arrive plus à réfléchir...
je veux faire un truc a priori pas trop compliqué : 2 blocs rectangulaires, occupant à eux 2 toute la largeur de la page, de la meme hauteur, les 2 blocs ont une bordure. la bordure centrale est commune.

Ca ressemblera un peu à ca :

Je ne veux pas travailler en largeur fixe : ca sera des pourcentages
La hauteur n'est pas fixe non plus, on doit prendre la plus grande des 2 blocs.

J'ai essayé avec des float...
j'arrive jamais exactement à mon besoin. Soit j'ai un bloc plus grand que l'autre, soit ma bordure n'est pas OK entre les 2 blocs....

merci de votre aide

**grafik.muzik** · 15/02/2009, 16h41

À ma connaissance, c'est beaucoup plus difficile que ça ne parait si tu veux utiliser une méthode valide et compatible entre tous les navigateurs.

La meilleure méthode que je connaisse, utilise la propriété display qui simule la structure d'un tableau XHTML. Dans ton cas, ça donne 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
34
35
36
37
38
39
40
41
42
43
<?xml version="1.0" encoding="utf-8" ?>
<!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" lang="fr">
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="Content-Language" content="fr" />
 
	<style type="text/css" media="screen">
#conteneur {
	display: table;
	border-collapse: collapse;
 
}
 
#bloc1, #bloc2 {
	border: 1px solid #000;
	display: table-cell;
}
 
#bloc1 {
 
	width: 100px;
}
 
#bloc2 {
	width: 300px;
}
	</style>
 
</head>
<body>
	<div id="conteneur">
		<div id ="bloc1">
			Texte du bloc1
		</div>
		<div id ="bloc2">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lorem. Integer neque. Nam fringilla lectus a tellus. Nullam lorem. In in tortor. Sed egestas, mauris vitae dignissim ultricies, magna risus scelerisque lorem, imperdiet pellentesque orci neque dapibus nisi. Phasellus porttitor fermentum leo. Ut ac libero. Nullam quis ipsum. Curabitur auctor. Cras dictum dictum odio. Nulla nisi odio, molestie vitae, sodales a, interdum ac, ipsum. Suspendisse faucibus feugiat eros. Sed nec dui. Pellentesque arcu. Praesent fringilla. Phasellus vestibulum sollicitudin ante. 
		</div>
	</div>
</body>
</html>

Selon mes test, cela fonctionne très bien dans les versions les plus récentes de Firefox, Safari, Chrome et Opera. Dans Safari et Chrome, le DOCTYPE doit être déclaré à strict (comme dans mon code) pour que ça fonctionne.

Toutefois, du côté d'Internet Explorer, ça ne fonctionne qu'à partir de la version 8, qui va sortir bientôt.

En passant, il se peut, que tu ai besoin d'utiliser « display: table-row » dans certaines situation.

Voilà! J'espère que ça t'aide!

**GihefBey** · 15/02/2009, 18h41

Bonjour,

S'il s'agit simplement de placer une bordure simulant des hauteurs égales, on peut peut-être se passer de donner un comportement de tableau à des <div>.

Il suffit d'affecter une bordure au bloc principal et de lui placer une image en arrière-plan pour matérialiser la bordure "centrale".

Par exemple

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
15
16
17
18
19
20
<body>
  <div id="conteneur">
    <div id="gauche">
      <p>je veux faire un truc a priori pas trop compliqué : 2 blocs rectangulaires, 
        occupant à eux 2 toute la largeur de la page, de la meme hauteur, 
        les 2 blocs ont une bordure. la bordure centrale est commune.
      </p>
    </div>
    <div id="droite">
      <p>Je ne veux pas travailler en largeur fixe : ca sera des pourcentages
        La hauteur n'est pas fixe non plus, on doit prendre la plus grande des 2 blocs.
      </p>
      <p>J'ai essayé avec des float...
        j'arrive jamais exactement à mon besoin. 
        Soit j'ai un bloc plus grand que l'autre, 
        soit ma bordure n'est pas OK entre les 2 bloc
      </p>
    </div>
  </div>
</body>

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
15
16
17
18
19
20
21
22
23
24
25
26
27
28
html, body {
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: #cd853f;
  color : #344979;
  }
#conteneur {
  position: relative;
  margin: 0 auto;
  width: 76%;
  text-align: left;
  border : 2px solid #000;
  background: #ffd url(brdc.png) repeat-y 30% 0;
  font-family: 'Trebuchet MS', Verdana, sans-serif;
  overflow : hidden;
  }
 
#gauche {
  float : left;
  width : 30%;
  }
#droite {
  margin-left : 30%;
  }
p {
  margin : 1em;
  }

-

**grafik.muzik** · 15/02/2009, 18h45

Il suffit d'affecter une bordure au bloc principal et de lui placer une image en arrière-plan pour matérialiser la bordure "centrale".

C'est une bonne idée, et ç'a l'avantage principal d'être davantage rétrocompatible.

**sebhm** · 15/02/2009, 18h52

Merci pour ta réponse.
Je n'ai jamais expérimenté ce type de Display, je fais le faire de ce pas...

en attendant, j'avais ceci :

Sinon, j'avais fait comme ca :

Code :

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

1
2
3
4
<div id="conteneur_total">
    <div id="bloc1">BLOC 1</div>
    <div id="bloc2">BLOC 2</div>
  </div>

avec le 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
div#conteneur_total  {
  margin : 0;
  padding : 0;
	border : 1px solid black;
}
div#bloc1 {
  margin : 0 ;
  width : 20%;
  float : left;
}
div#bloc2 {
  margin : 0 ;
  margin-left : 22%;
  border-left : 1px solid black;
}

et ca allait a peu pres...

Merci encore

**GihefBey** · 15/02/2009, 19h11

Cette solution réclame que le bloc de droite soit toujours le plus haut.

Avec ma proposition, celui de gauche peut l'être aussi. Le "bordure centrale" s'adapte.
On peut même, en bidouillant au cas par cas pour la largeur du gauche, obtenir des arrière-plans colorés différents.

Le code est identique, il suffit de modifier l'arrière-plan

Code css :

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

background: #ffd url(brdc2.png) repeat-y 30% 0;

-

**sebhm** · 15/02/2009, 21h10

Merci GihefBey pour ta réponse
(je n'avais répondu qu'à grafik.muzik dans mon second Post car je n'avais pas vu le tien) (le temps qu'il m'a fallu pour écrire mon post !!!

)

En effet, cette technique simulant la bordure jusqu'en bas est celle que j'avais trouvée.
Elle est très intéressante (et meme plus efficace que ce que je fais) mais comporte un point noir qui m'embete : la bordure disparait à l'impression
(meme si c'est une option, la non-impression de l'arriere plan est souvent activée par défaut sur les navigateurs, ce qui se comprend).

Et comme l'impression de ma page est nécessaire, je suis bien emmerdé...

**GihefBey** · 15/02/2009, 21h41

Alors essayons autre chose, une image.

Code html :

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

1
2
3
4
5
6
7
8
9
<body>
  <div id="conteneur">
    <div id="gauche">
    </div>
    <div id="droite">
    </div>
    <img id="separ" src="brdc.png" alt="séparation" />
  </div>
</body>

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
15
16
17
18
19
20
21
22
23
24
25
#conteneur {
  position: relative;
  margin: 0 auto;
  width: 76%;
  text-align: left;
  border : 2px solid #000;
  background-color: #ffd;
  font-family: 'Trebuchet MS', Verdana, sans-serif;
  overflow : hidden;
  }
 
#gauche {
  float : left;
  width : 30%;
  }
#droite {
  margin-left : 30%;
  }
#separ {
  position : absolute;
  top : 0;
  left : 30%;
  width : 4px;
  height : 100%;
  }

À tester.

-

**sebhm** · 16/02/2009, 00h37

OK +10

il faudra pas que je travaille en 'absolute' mais ca devrait le faire.

Par contre, OK pour 2 DIV, mais je viens de tester avec 3 et j'ai un décallage...

Code :

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

1
2
3
4
5
<div id="conteneur">
  <div id="bloc1">BLOC1</div>
  <div id="bloc2">BLOC2</div>
  <div id="bloc3">BLOC3</div>
</div>

et 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
div#conteneur {
  margin : 0;
  padding : 0;
  border : 1px solid black;
}
div#bloc1 {
  margin : 0 ;
  width : 20%;
  float : left;
}
div#bloc2 {
  margin : 0 ;
  margin-left : 22%;
  width : 22%;
  border : 1px solid black;
}
div#bloc3 {
  margin : 0 ;
  margin-left : 52%;
  border : 1px solid black;
}

Le 3eme bloc passe une ligne en dessous alors qu'il a la place..
je ne comprends pas

**sebhm** · 16/02/2009, 00h40

bon ben j'ai dit une connerie...

il faut mettre le second DIV en float également.

je poursuis mes tests !

**sebhm** · 16/02/2009, 00h47

ca donne ca :

Code :

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

1
2
3
4
5
6
7
8
<div id="conteneur">
  <div id="bloc1">BLOC1</div>
  <img id="separ1" src="img/brdc.png" alt="séparation" />
  <div id="bloc2">BLOC2<br />BLOC2</div>
  <img id="separ2" src="img/brdc.png" alt="séparation" />
  <div id="bloc3">BLOC3</div>
  <hr class="antifloat" />
</div>

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
31
32
33
34
35
36
37
38
39
40
41
42
div#conteneur {
  position : relative;
  margin : 0;
  padding : 0;
	border : 1px solid black;
}
div#bloc1 {
  margin : 0 ;
  width : 20%;
  float : left;
}
div#bloc2 {
  margin : 0 ;
  float : left;
  width : 22%;
  border : 1px solid black;
}
div#bloc3 {
  margin : 0 ;
  margin-left : 52%;
  border : 1px solid black;
  width : 22%;
}
hr.antifloat {
  visibility : hidden;
	clear : both;
}
 
#separ1 {
  position : absolute;
  top : 0;
  left : 20%;
  width : 4px;
  height : 100%;
  }
#separ2 {
  position : absolute;
  top : 0;
  left : 52%;
  width : 4px;
  height : 100%;
  }

le CLEAR est nécessaire pour que le bloc 'conteneur' ait la bonne hauteur.

**sebhm** · 16/02/2009, 08h22

Je crois qu'on est pas trop mal !!

petit règlage :
Est-ce possible de centrer Verticalement le texte de mes blocs ??

**GihefBey** · 16/02/2009, 21h37

Envoyé par sebhm

Est-ce possible de centrer Verticalement le texte de mes blocs ??

Ça c'est une autre question.

Une recherche ici te permettra sûrement de trouver des réponses.
Sinon, crée un nouveau post pour ta nouvelle question.

-

**phfle1** · 17/02/2009, 02h57

Merci pour le post!

blocs cote à cote

CSS

Discussions similaires

Partager

Partager