Bonjour,
je souhaite donc réaliser une mise en page sur 2 colonnes dont la largeur sera fixée en % (e.g: 20% pour la colonne de gauche et 80% pour celle de droite). Le contenu de chaque colonne
sera fixe (e.g: 200px pour le contenu de la col gauche et 790px pour le contenu de la col droite).
Comme vous le voyez la largeur additionnée des 2 contenus (990px) permettra un affichage sans scrollbar horizontale pour les résolutions de largeur 1024 et supérieures.
Mon problème était d'éviter le chevauchement des 2 colonnes pour les résolutions inférieures à 1024.
Ci-dessous, un exemple qui fonctionne comme je le souhaite sous FF (les colonnes restent adjacentes en 800x600) mais pas sous IE8 (la colonne de droite passe sous celle de gauche).
Finalement, c'est le comportement adopté par IE qui me semble le plus logique.
Mais comme cela fonctionne avec FF, je voudrais savoir s'il est possible d'obtenir le même résultat avec IE.
Merci d'avance.
Modifié par pyd (21 Apr 2010 - 20:20)
je souhaite donc réaliser une mise en page sur 2 colonnes dont la largeur sera fixée en % (e.g: 20% pour la colonne de gauche et 80% pour celle de droite). Le contenu de chaque colonne
sera fixe (e.g: 200px pour le contenu de la col gauche et 790px pour le contenu de la col droite).
Comme vous le voyez la largeur additionnée des 2 contenus (990px) permettra un affichage sans scrollbar horizontale pour les résolutions de largeur 1024 et supérieures.
Mon problème était d'éviter le chevauchement des 2 colonnes pour les résolutions inférieures à 1024.
Ci-dessous, un exemple qui fonctionne comme je le souhaite sous FF (les colonnes restent adjacentes en 800x600) mais pas sous IE8 (la colonne de droite passe sous celle de gauche).
Finalement, c'est le comportement adopté par IE qui me semble le plus logique.
Mais comme cela fonctionne avec FF, je voudrais savoir s'il est possible d'obtenir le même résultat avec IE.
Merci d'avance.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" media="screen" href="main.css" />
</head>
<body>
<div id="leftCol">col gauche
<div id="leftContent">contenu col gauche</div>
</div>
<div id="rightCol">col droite
<div id="rightContent">contenu col droite</div>
</div>
</body>
</html>
body {
margin: 0;
}
#leftCol{
float:left;
width:20%;
height:200px;
min-width: 200px;
background-color: #ddd;
}
#rightCol{
width:80%;
/* ff ne se pose pas de questions ici. Pourtant il me semble 'normal' que
lorsque les 20% sont inférieurs au min-width de 200px de #leftCol, #rightCol
passe en dessous avec ie*/
margin-left:20%;
min-width: 790px;
height:200px;
overflow:auto;
background-color: orange;
}
#leftContent {
width:200px;
margin: 0 auto;
padding:1px 0;
background-color: #999;
}
#rightContent {
width:790px;
margin:20px auto 0 auto;
background-color: red;
color: #fff;
}
Modifié par pyd (21 Apr 2010 - 20:20)
Merci encore.