Développer div à la largeur maximale lorsque float: left est défini

115

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 le contenu div remplisse tout l'écran moins ces 100 pixels pour le menu. Si je n'utilise pas float, le div se développe exactement comme il se doit. Mais comment définir cela lorsque le flotteur est défini? Si j'utilise qc comme

style=width:100%

puis le contenu div obtient la taille du parent, qui est soit le corps, soit un autre div que j'ai également essayé, et donc bien sûr, il ne rentre pas à droite du menu et est ensuite affiché ci-dessous.

html width Flo
la source

Réponses:

138

J'espère vous avoir bien compris, jetez un œil à 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>
Développer l'extrait

merkuro
la source
5
La question déclare que "les deux flotteurs sont nécessaires".
Crescent Fresh
8
Oui, vous avez raison et je suis d'accord. Cependant, je pense que Flo n'a mentionné que cela, car il pense qu'ils sont tous les deux! nécessaire pour obtenir la mise en page souhaitée et donc ma solution alternative.
merkuro
@merkuro: bon point. Je suis d'accord, ".right" n'a pas besoin d'être flotté pour obtenir l'effet souhaité. @Flo: pouvez-vous confirmer, le contenu div doit-il être flottant? Comme pour d'autres raisons?
Crescent Fresh
pourrait fonctionner je vais essayer un peu avec ça, vous avez raison, et le flotteur est plus agréable, mais je pense que cela ne fonctionnera pas
Flo
2
Ahh jeah et je vois à nouveau la raison pour laquelle je l'ai changé en float: Ie7 et Firefox fonctionnent bien, mais c'est-à-dire 5.5 et ie 6 commencent la marge sur le bord droit du div gauche, donc il a un 236px (la largeur réelle, 100 était un exemple) écart entre les deux divs
Flo
100

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 divaprè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 flexflexibilité 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>
alanaktion
la source
Après quelques tests supplémentaires, il semble que vous n'ayez pas besoin de déclencher hasLayout avec "position: relative" pour que cela fonctionne dans IE 6, je ne suis pas sûr d'IE 5, mais ce n'est généralement pas un problème de l'inclure de toute façon, Juste pour être sûr.
alanaktion
1
Cette réponse ne semble pas appréciée, mais c'est vraiment bon à savoir. Celui-ci vous permet de flotter, même avec un élément flottant à l'intérieur du div. Je suis un "contexte de mise en forme de bloc" sur Google. maintenant.
Carlos Gil
Le meilleur moyen est d'utiliser une simple table à 2 cols au lieu de perdre du temps à ajouter des tonnes de trucs CSS non compatibles avec tous les navigateurs
Marco Demaio
@Marco J'avais besoin d'utiliser CSS pour cela car ma conception est réactive. Différentes tailles d'écran nécessitaient des dispositions différentes, donc un tableau n'aurait pas fonctionné. En outre, cette méthode semble fonctionner dans pratiquement tous les navigateurs que quiconque utilise encore.
alanaktion
1
@MarcoDemaio, mon point était que sur une taille d'écran où la plus petite colonne fixe serait à peu près aussi grande que la colonne principale, comme sur un appareil mobile, je voulais que les deux colonnes deviennent des lignes pleine largeur, ce qui ne pouvait pas être fait avec des tables à moins que je ne veuille réellement déplacer du contenu avec JavaScript.
alanaktion
31

Solution sans fixer la taille sur votre marge

.content .right{
    overflow: auto; 
    background-color: red;
}

+1 pour Merkuro, mais si la taille du flotteur change, votre marge fixe échouera. Si vous utilisez le CSS ci-dessus à droite, divil changera bien la taille avec le changement de taille sur le flotteur gauche. C'est un peu plus flexible comme ça. Vérifiez le violon ici: http://jsfiddle.net/9ZHBK/144/

Se flétrir
la source
2
@alanaktion J'ai enlevé l'auto inutile. La différence réside dans la valeur de dépassement. Apparemment overflow: hiddenet overflow autoentraîner le même comportement. Je pense aussi que les gens apprécient le violon.
Wilt
Si quelqu'un veut savoir pourquoi cela fonctionne, voir ici: stackoverflow.com/a/1767270/2756409
TylerH
Je pense que c'est mieux que la solution de merkuro.
SkuraZZ
6

Les éléments flottants sont retirés de la disposition de flux normale et les éléments de bloc, tels que les 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 quelques solutions possibles pour créer la disposition à deux colonnes que vous recherchez: http://www.maxdesign.com.au/presentation/page_layouts/

Plus précisément, la "mise en page liquide à deux colonnes".

À votre santé!

Sean Aitken
la source
4

Ceci est une solution mise à jour pour HTML 5 si quelqu'un est intéressé et n'aime pas le "flottant".

Le tableau fonctionne très bien dans ce cas, car vous pouvez définir la largeur fixe du tableau et de la cellule du tableau. 

.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

Snowie
la source
+1 enfin quelque chose qui fonctionne avec l'élément de largeur fixe à droite, même s'il n'utilise pas techniquement float.
Karthik T
+1 donc totalement oui. après des années de lutte avec les flotteurs, les positions et les tables, c'est la bonne solution. la solution acceptée propage des CSS non sécurisés.
horace
4

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>
Développer l'extrait

suathd
la source
Bienvenue à SO. Pourriez-vous ajouter une explication sur la façon dont cela fonctionne?
yacc
3

Et en fonction de merkurola solution de, si vous souhaitez maximiser 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 défectueux sur IE.

kubilayeksioglu
la source
1

La réponse acceptée pourrait fonctionner, mais je n'aime pas l'idée de chevauchement des marges. En HTML5, vous feriez cela avec display: flex;. C'est une solution propre. Définissez simplement la largeur d'un élément et flex-grow: 1;de l'élément dynamique. Une version modifiée de merkuros fiddle: https://jsfiddle.net/EAEKc/1499/

Christoph Bühler
la source
0

Salut, il existe un moyen simple avec la méthode cachée de débordement sur l'élément droit.

    .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>
Développer l'extrait

Sanjib Debnath
la source
-1

Cela pourrait fonctionner: 

    div{
    display:inline-block;
    width:100%;
    float:left;
    }
kirtan-shah
la source