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.

Mise en forme de DIV sans contenu

CSS

Vue hybride

Discussions similaires

Partager

Partager