Deux colonnes de hauteur variable

**jacquesprogram** · 08/02/2012, 11h35

Bonjour,
j'ai créé une mise en page CSS en 2 colonnes, dont le schéma est fourni en pièce jointe.
Et voici le code CSS correspondant :

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
29
#wrapcontent{
	width: 100%;
}
 
#content{
	margin: 0 auto 0 auto;
	position: relative;
}
 
.column-left{
	float: left;
	width: 440px;
	margin: 20px;
}
 
.column-right{
	float: right;
	width: 270px;
	margin: 20px 20px 20px 0;
}
 
#header, #content, #footer {
    width: 800px;
 
}
 
#content{
	min-height: 600px;
}

Le problème : le contenu des 2 colonnes peut varier en longueur, seulement, lorsque je rajoute du texte, la colonne dépasse de son conteneur. J'aimerais que #content s'adapte. Comment faire ?

Invité · 08/02/2012, 12h23

Bonjour,
rajoute :

Code :

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

1
2
3
#content{
	overflow:hidden;
}

**jacquesprogram** · 08/02/2012, 13h23

Effectivement, ça marche nickel !
Merci beaucoup.

**jacquesprogram** · 10/02/2012, 12h46

Je viens de me rendre compte que, si ça marche effectivement très bien pour la colonne de gauche, par contre, si je rajoute du contenu dans la colonne de droite, le surplus est tronqué et ne s'affiche pas !
Comment y remédier ?

**jacquesprogram** · 10/02/2012, 13h01

Pour info, la page sur laquelle cela ne marche pas comporte un élément supplémentaire par rapport au schéma joint : un #content-footer situé à l'intérieur de #content, après les 2 colonnes, qui s'affiche sur toute la largeur de #content et dont le code css est :

Code css :

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

1
2
3
4
#content-footer {
	clear: both;
	margin: 20px auto 0 auto;
}

**NoSmoking** · 10/02/2012, 14h27

Bonjour,
il serait bon que tu nous mettes la structure de ton fichier HTML, pour le CSS il semblerait que l'on ait tout!

**jacquesprogram** · 10/02/2012, 14h28

Pour être plus clair, voici ci-joint le schéma de la page posant problème, et le code CSS :

Code css :

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

1
2
3
4
5
6
7
#menu {
	margin: 50px auto 10 auto;
	background-image: url(images/menu-semaine.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	width: 206px;
}

(le reste du code CSS est identique à celui fourni plus haut)
Le problème est que la div #menu est tronquée, n'affichant qu'une toute petite partie de l'image d'arrière-plan.
Et voici le code HTML, comme demandé :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Le Chef &amp; moi</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
////////////////////////////////////////////////////////////////////////////////// CONTENU ///////////////////////////////////////////////////////////////////////////////////////////// -->
    <div id="wrapcontent">
    	<div id="content" class="opacity shadow">
        <!-- //////////////////////// COLONNE GAUCHE ///////////////////////// -->
        	<div class="column-left">
            	<h2>Bienvenue à &laquo;Le Chef et Moi&raquo; !</h2>
                <p>Pour vous simplifier la vie, et retrouver du temps libre, &laquo;Le Chef et moi&raquo; vous propose des paniers avec les recettes et les ingr&eacute;dients frais n&eacute;cessaire pour r&eacute;aliser des bons plats &eacute;quilibr&eacute;s et diversifi&eacute;s en maximum 30 minutes, livr&eacute;s chez vous !</p>
 
          		<img src="images/etapes.jpg" width="440" height="210" alt="Etapes" />
          	</div>  
 
        <!-- //////////////////////// COLONNE DROITE ///////////////////////// -->
        	<div class="column-right">
       	  		<img src="images/postit.jpg" width="270" height="200" alt="Manger mieux, facile et rapide à préparer" />
                <div id="menu-semaine">
 
                </div>
          	</div>
 
            <div id="content-footer">
            	<p>Les paniers sont pr&eacute;par&eacute;s pour les repas du soir du Lundi au Jeudi, laissant ainsi les week-end &agrave; votre imagination. La livraison s'effectuera le lundi et le mercredi &agrave; votre lieu de travail, ou &agrave; domicile.</p>
                <h2 class="stretch">Panier pour 2 personnes 15 euros</h2>
                <h2 class="stretch">Panier pour 4 personnes 26 euros</h2>
                <div class="box-attention">
                	<p class="stretch">&nbsp;</p>
                	<p class="stretch">Pour tous renseignements et commandes</p>
                    <p class="stretch">tél. 06.11.29.35.79 ou lechefetmoi@gmail.com</p>
                	<p class="stretch">&nbsp;</p>                   
                </div>
 
            </div>
 
        </div>
 
    </div>
 
</body>
</html>

Deux colonnes de hauteur variable [CSS 2]

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager