Augmente div en largeur maximale lorsque float: left est défini
J'ai quelque chose comme ça:
<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>
les deux flotteurs sont nécessaires. Je veux que la div de contenu remplisse la totalité de l'écran moins les 100 pixels du menu. Si je n'utilise pas float, la div se développe exactement comme il se doit. Mais comment définir cela quand float est défini? Si j'utilise qch comme
style=width:100%
alors la div de contenu obtient la taille du parent, qui est soit le corps, soit une autre div que j'ai aussi essayée, et donc bien sûr, elle ne rentre pas à droite du menu et est ensuite montrée ci-dessous.
En espérant que je vous ai bien compris, regardez ceci: http://jsfiddle.net/EAEKc/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Content with Menu</title>
<style>
.content .left {
float: left;
width: 100px;
background-color: green;
}
.content .right {
margin-left: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
<p>Hi, Flo!</p>
</div>
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
</div>
</body>
</html>La manière la plus compatible que j'ai trouvée de faire cela n'est pas très évidente. Vous devez supprimer le float de la deuxième colonne et appliquer overflow:hidden à elle. Bien que cela semble cacher tout contenu qui sort de la div, cela oblige en fait la div à rester dans sa société mère.
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 sera utile pour 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 un div à droite flottante après le contenu, si quelqu'un connaît un bon moyen de le faire fonctionner, avec un bon IE = compatibilité, je serais très heureux de l'entendre.
Nouvelle et meilleure option avec display: flex;
Maintenant que le modèle Flexbox est assez largement implémenté, je recommanderais plutôt de l’utiliser, car il permet beaucoup plus de possibilités de flex avec la mise en page. Voici une simple colonne de type 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 à largeur variable!
<div style="display: flex;">
<div style="width: 100px;">menu</div>
<div style="flex:1;">content</div>
<div style="width: 100px;">sidebar</div>
</div>
Solution sans fixer la taille sur votre marge
.content .right{
overflow: auto;
background-color: red;
}
+1 pour Merkuro, mais si la taille du flottant change, votre marge fixe échouera. Si vous utilisez ci-dessus CSS à droite div cela changera bien la taille en modifiant la taille sur le flotteur de gauche. C'est un peu plus souple comme ça. Vérifiez le violon ici: http://jsfiddle.net/9ZHBK/144/
Les éléments flottants sont sortis de la disposition de flux normal et les éléments de bloc, tels que les éléments DIV, ne couvrent plus la largeur de leur parent. Les règles changent dans cette situation. Au lieu de réinventer la roue, consultez ce site pour trouver des solutions permettant de créer la disposition de deux colonnes que vous recherchez: http://www.maxdesign.com.au/presentation/page_layouts/
Plus précisément, la "disposition liquide à deux colonnes".
À votre santé!
Ceci est une solution mise à jour pour HTML 5 si quelqu'un est intéressé et n'aime pas "flotter".
Dans ce cas, la table fonctionne très bien car vous pouvez définir la largeur fixe pour le tableau et la cellule.
.content-container{
display: table;
width: 300px;
}
.content .right{
display: table-cell;
background-color:green;
width: 100px;
}
http://jsfiddle.net/EAEKc/596/ code source original de @merkuro
cette utilisation peut résoudre votre problème.
width: calc(100% - 100px);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Content with Menu</title>
<style>
.content .left {
float: left;
width: 100px;
background-color: green;
}
.content .right {
float: left;
width: calc(100% - 100px);
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
<p>Hi, Flo!</p>
</div>
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
</div>
</body>
</html>Et sur la base de la solution de merkuro, si vous souhaitez agrandir celle de gauche, vous devez utiliser:
<!DOCTYPE html>
<html lang="en">
<head>
<meta "charset="UTF-8" />
<title>Content with Menu</title>
<style>
.content .left {
margin-right: 100px;
background-color: green;
}
.content .right {
float: right;
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
<div class="left">
<p>Hi, Flo!</p>
</div>
</div>
</body>
</html>
N'a pas été testé sur IE, il peut donc sembler cassé sur IE.
La réponse acceptée pourrait fonctionner, mais je n'aime pas l'idée de superposer des marges. En HTML5, vous feriez cela avec display: flex;. C'est une solution propre. Il suffit de définir la largeur pour un élément et flex-grow: 1; pour l'élément dynamique. Une version éditée du violon merkuros: https://jsfiddle.net/EAEKc/1499/
Salut, il existe un moyen facile avec la méthode de débordement caché sur le bon élément.
.content .left {
float:left;
width:100px;
background-color:green;
}
.content .right {
overflow: hidden;
background-color:red;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Content Menu</title>
</head>
<body>
<div class="content">
<div class="left">
<p>Hi, Flo! I am Left</p>
</div>
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
<p> It done with overflow hidden and result is same.</p>
</div>
</div>
</body>
</html>