Mise en forme de DIV sans contenu

jimmyneutron · 08/12/2011, 19h03

Bonjour,

quelle est la méthode la plus simple pour obtenir avec des DIV/SPAN etc... un affichage 2 colonnes, dont celle de gauche est fixée à 200px de large et celle de droite occupe toute la place autorisée dans le parent. Un aspect tableau en gros...

J'ai essayé un maximum d'astuce mais y a toujours une c****** quand l'élément est vide ex: <div></div>

Merci pour l'aide.

NoSmoking · 08/12/2011, 19h47

Bonsoir,
as tu essayé ce genre de construction, DIV dans DIV

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
html, body{
  font-family : Verdana, sans-serif;
  margin : 0;
  padding : 0;
  width : 100%;
  height : 100%;
}
div#contenu {
  width:100%;
  height : 100%;
  background-color:#e0e0e0;
}
div#menu {
  float:left;
  width:200px;
  height:100%;
  margin-right : 10px;
  background-color:#6699ff;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<body>
<div id="contenu">
	<div id="menu">DROITE</div>
	<p>Antequam in provincia toto fuerit pervenire denique provincia nascetur antequam.</p>
</div>
</body>
</html>

Emyleen · 09/12/2011, 10h52

Sinon moi je propose ça, ça fonctionne sur IE9 chez moi, mais apparemment j'ai lu sur quelques site que ça ne fonctionne pas sur tout les IE...

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
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Des colonnes!</title>
<style type="text/css">
#contenu {
	display: table;
	background-color: #E1FFC4;
	padding: 10px;
}
#colonneGauche {
	display: table-cell;
	background-color: #FFC6E2;
	width: 200px;
}
#colonneDroite {
	display: table-cell;
	background-color: #BDF;
}
</style>
</head>
 
<body>
<div id="contenu">
	<div id="colonneGauche">bla bla bla bla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla bla
    </div>
    <div id="colonneDroite">bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli bli 
    </div>
</div>
</body>
</html>

Bovino · 09/12/2011, 11h36

Désolé Emyleen, mais je trouve que ta solution est pire que d'utiliser des tables...

Un des gros défauts des tables est la difficulté que peuvent rencontrer les navigateurs pour les afficher et donc une grosse perte de performance. Or ta solution rajoute encore de la complexité pour au final uniquement contourner la contrainte... D'autant que tous les navigateurs n'acceptent pas ces valeurs de display.

A la rigueur, des display inline-block peuvent sembler une bonne solution, sauf que IE 7- je crois ne l'accepte que pour les éléments inline.

08/12/2011, 19h03	#1
jimmyneutron Membre à l'essai Inscription : avril 2007 Messages : 60 Détails du profil Informations forums : Inscription : avril 2007 Messages : 60 Points : 22 Points : 22	Mise en forme de DIV sans contenu Bonjour, quelle est la méthode la plus simple pour obtenir avec des DIV/SPAN etc... un affichage 2 colonnes, dont celle de gauche est fixée à 200px de large et celle de droite occupe toute la place autorisée dans le parent. Un aspect tableau en gros... J'ai essayé un maximum d'astuce mais y a toujours une c****** quand l'élément est vide ex: <div></div> Merci pour l'aide.
	00

09/12/2011, 11h36	#4
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 787 Points : 35 787	Désolé Emyleen, mais je trouve que ta solution est pire que d'utiliser des tables... Un des gros défauts des tables est la difficulté que peuvent rencontrer les navigateurs pour les afficher et donc une grosse perte de performance. Or ta solution rajoute encore de la complexité pour au final uniquement contourner la contrainte... D'autant que tous les navigateurs n'acceptent pas ces valeurs de display. A la rigueur, des display inline-block peuvent sembler une bonne solution, sauf que IE 7- je crois ne l'accepte que pour les éléments inline. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	10

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