J'ai une mise en page avec un menu DIV sur la gauche. Ceci est flotté à gauche avec une largeur EM fixe. J'ai alors un contenu DIV qui a une marge gauche de plus que la largeur du menu. Donc, il se trouve bien à la droite du menu et remplit l'espace restant avec le menu et le contenu alignés parfaitement.CSS Floats - contenu tombant dans IE6
Cependant, dans Internet Explorer 6, si le contenu devient trop large, il tombe en dessous du menu. ce qui signifie que vous avez plein d'espaces et que vous ne pouvez pas voir le contenu du tout sans défilement.
Malheureusement, je ne suis pas en mesure d'apporter des modifications au contenu - il s'agit d'une refonte d'un site hébergeant du contenu tiers, et la modification de ce contenu est hors de portée de ce que je peux faire.
De plus, il existe une barre de bas de page qui doit se trouver sous le menu et le contenu. J'ai réussi à le faire fonctionner en fournissant IE6 avec une disposition différente en utilisant le positionnement absolu - malheureusement le pied de page ressemble à des ordures et comme IE6 est le deuxième navigateur le plus utilisé sur notre site, je ne peux pas vraiment aller avec ça.
J'ai également essayé de déconner avec des débordements mais j'ai fini par causer des problèmes avec des barres de défilement aléatoires apparaissant partout, ce qui n'était pas bon non plus.
Est-ce que quelqu'un sait s'il existe une façon simple de faire cela dans Javascript et dans les navigateurs "appropriés"? Je pense actuellement que ce sera une mise en page basée sur une table.
Voici un exemple du problème:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.menu {
width: 14em;
float: left;
}
.content {
margin-left: 15em;
zoom: 1;
}
.footer {
clear: both;
}
/* styling to make the demo more obvious */
.menu {
background-color: #f99;
}
.content {
background-color: #9f9;
}
.footer {
background-color: #99f;
}
td {
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="container">
<div class="menu">
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</div>
<div class="content">
<h1>Main Content</h1>
<table>
<tr>
<td>this is a really</td>
<td>wide table which</td>
<td>I am using to push</td>
<td>the content down</td>
<td>need to keep going</td>
<td>so that it breaks</td>
<td>in ie6</td>
<td>but naturally</td>
<td>nothing else</td>
<td>sghskdhksdhfsdhffs</td>
<td>sghskdhksdhfsdhffs</td>
<td>sghskdhksdhfsdhffs</td>
<td>sghskdhksdhfsdhffs</td>
</tr>
</table>
</div>
</div>
<div class="footer">
<p>Copyright blah blah blah</p>
</div>
</body>
</html>
Je ne pouvais pas comprendre comment ajouter 2 commentaires à la même réponse ... mais de toute façon ... Bien que j'ai réussi à résoudre ce problème avec des débordements, cela a créé un problème beaucoup plus grave par lequel je finirais avec 2 jeux de barres de défilement.Naviguer sur une très grande table devint incroyablement difficile. Vous deviez utiliser une barre de défilement pour en trouver une autre. Ensuite, utilisez le premier pour faire défiler à nouveau, etc. Il a juste créé une charge de problèmes d'utilisabilité. (Cela ne veut pas dire que ça ne peut pas être fait pour travailler ..) –