La manière la plus compatible que j'ai trouvée de faire cela n'est pas très évidente. Vous devez supprimer le flotteur de la deuxième colonne et l'appliquer overflow:hidden
. Bien que cela semble cacher tout contenu qui sort de la div, cela force en fait la div à rester dans son parent.
En utilisant votre code, voici un exemple de la façon dont cela pourrait être fait:
<div style="width: 100px; float: left;">menu</div>
<div style="overflow: hidden;">content</div>
J'espère que cela est utile à tous ceux qui ont ce problème, c'est ce que j'ai trouvé qui fonctionne le mieux pour le site que je construisais, après avoir essayé de l'adapter à d'autres résolutions. Malheureusement, cela ne fonctionne pas si vous incluez également un flottant à droite div
après le contenu, si quelqu'un connaît un bon moyen de le faire fonctionner, avec une bonne compatibilité IE, je serais très heureux de l'entendre.
Nouvelle option meilleure en utilisant display: flex;
Maintenant que le modèle Flexbox est assez largement implémenté, je recommande en fait de l'utiliser à la place, car il permet beaucoup plus de flex
flexibilité avec la mise en page. Voici une simple deux colonnes comme l'original:
<div style="display: flex;">
<div style="width: 100px;">menu</div>
<div style="flex: 1;">content</div>
</div>
Et voici une colonne à trois colonnes avec une colonne centrale de largeur flexible!
<div style="display: flex;">
<div style="width: 100px;">menu</div>
<div style="flex:1;">content</div>
<div style="width: 100px;">sidebar</div>
</div>