Comment faire un div remplir un espace horizontal restant?


419

J'ai 2 divisions: une dans le côté gauche et une dans le côté droit de ma page. Celui du côté gauche a une largeur fixe et je veux que celui du côté droit remplisse l'espace restant.

#search {
  width: 160px;
  height: 25px;
  float: left;
  background-color: #ffffff;
}

#navigation {
  width: 780px;
  float: left;
  background-color: #A53030;
}
<div id="search">Text</div>
<div id="navigation">Navigation</div>


11
Supprimez la propriété width et float sur la #navigation et cela fonctionnera.
Johan Leino


1
@alexchenco: vous voudrez peut-être mettre à jour votre réponse choisie à celle fournie par Hank
Adrien Be

@AdrienBe en fait, si vous regardez la réponse de mystrdat, je pense que c'est encore mieux. Ce n'est qu'une seule ligne de CSS et c'est la seule qui a fonctionné pour moi (je fais trois colonnes avec float: gauche; sur les deux premières avec des largeurs fixes et un débordement: auto sur la dernière et ça marche très bien)
edwardtyl

@edwardtyl assez juste. En fait, il semble utiliser une technique similaire à la réponse que j'ai fournie pour stackoverflow.com/questions/4873832/…
Adrien Be

Réponses:


71

Cela semble accomplir ce que vous cherchez.

#left {
  float:left;
  width:180px;
  background-color:#ff0000;
}
#right {
  width: 100%;
  background-color:#00FF00;
}
<div>
  <div id="left">
    left
  </div>
  <div id="right">
    right
  </div>
</div>


8
Vous devez supprimer la largeur: 100% sur la div droite pour que cela fonctionne.
Johan Leino

250
Cette solution a en fait un problème. Essayez de supprimer la couleur de l'élément LEFT. Vous remarquerez que la couleur de l'élément DROIT se cache réellement en dessous. Le contenu semble aller au bon endroit, mais le div droit lui-même ne l'est pas.
Vyrotek

5
+1 A également résolu mon problème. Ce que j'ai appris, c'est que je devais retirer "float: left" sur le div de remplissage. Je pensais que cela ferait imploser la page
keyser

12
Peut-être bon de remarquer que la remarque de Vyroteks est vraie, mais peut être résolue avec un débordement: caché dans la colonne de droite. Denzel le mentionne, mais ce n'est pas la réponse acceptée, vous pourriez donc manquer ça ...
Ruudt

45
C'est tout à fait faux, l'élément droit a sa pleine taille, juste son contenu flotte autour de l'élément gauche. Ce n'est pas une solution, juste plus de confusion.
mystrdat

268

Le problème que j'ai trouvé avec la réponse de Boushley est que si la colonne de droite est plus longue que la gauche, elle s'enroulera autour de la gauche et recommencera à remplir tout l'espace. Ce n'est pas le comportement que je recherchais. Après avoir cherché parmi de nombreuses «solutions», j'ai trouvé un tutoriel (maintenant le lien est mort) sur la création de pages à trois colonnes.

L'auteur propose trois façons différentes, une de largeur fixe, une avec trois colonnes variables et une avec des colonnes externes fixes et un milieu de largeur variable. Beaucoup plus élégant et efficace que les autres exemples que j'ai trouvés. Amélioration significative de ma compréhension de la mise en page CSS.

Fondamentalement, dans le cas simple ci-dessus, faites flotter la première colonne à gauche et donnez-lui une largeur fixe. Donnez ensuite à la colonne de droite une marge gauche un peu plus large que la première colonne. C'est ça. Terminé. Code d'Ala Boushley:

Voici une démo dans Stack Snippets & jsFiddle

#left {
  float: left;
  width: 180px;
}

#right {
  margin-left: 180px;
}

/* just to highlight divs for example*/
#left { background-color: pink; }
#right { background-color: lightgreen;}
<div id="left">  left  </div>
<div id="right"> right </div>

Avec l'exemple de Boushley, la colonne de gauche contient l'autre colonne à droite. Dès que la colonne de gauche se termine, la droite recommence à remplir tout l'espace. Ici, la colonne de droite s'aligne simplement plus loin dans la page et la colonne de gauche occupe sa grande marge de gras. Aucune interaction de flux nécessaire.


Lorsque vous fermez la balise div, le contenu après cette div doit s'afficher sur une nouvelle ligne, mais cela ne se produit pas. Pouvez-vous expliquer pourquoi?
fuddin

devrait être: marge-gauche: 190px; tu as oublié ';'. La marge gauche doit également être de 180 pixels.
fuddin

4
Remarque: si vous voulez que l'élément de largeur fixe soit à droite, assurez-vous de le placer d'abord dans le code ou il sera de toute façon poussé vers la ligne suivante.
Trevor

2
@RoniTovi, les éléments flottants doivent précéder ceux qui ne flottent pas dans votre html. jsfiddle.net/CSbbM/127
Hank

6
Alors, comment faites-vous cela si vous voulez éviter une largeur fixe? En d'autres termes, permettre à la colonne de gauche d'être aussi large que nécessaire et à la colonne de droite de prendre le reste?
Patrick Szalapski

126

La solution vient de la propriété display.

Fondamentalement, vous devez faire en sorte que les deux divs agissent comme des cellules de tableau. Ainsi, au lieu d'utiliser float:left, vous devrez utiliser display:table-cellsur les deux divs, et pour la div dynamique de largeur que vous devez width:auto;également définir . Les deux divs doivent être placés dans un conteneur de 100% de largeur avec la display:tablepropriété.

Voici le css:

.container {display:table;width:100%}
#search {
  width: 160px;
  height: 25px;
  display:table-cell;
  background-color: #FFF;
}
#navigation {
  width: auto;
  display:table-cell;
  /*background-color: url('../images/transparent.png') ;*/
  background-color: #A53030;
}

*html #navigation {float:left;}

Et le HTML:

<div class="container">
   <div id="search"></div>
   <div id="navigation"></div>
</div>

IMPORTANT: pour Internet Explorer, vous devez spécifier la propriété float sur la largeur dynamique div, sinon l'espace ne sera pas rempli.

J'espère que cela résoudra votre problème. Si vous le souhaitez, vous pouvez lire l'article complet que j'ai écrit à ce sujet sur mon blog .


3
Ne fonctionne pas lorsque le contenu à l'intérieur de la div avec width: auto est plus grand que le reste de l'espace disponible dans la fenêtre.
Nathan Loyer

4
@einord, cette solution n'utilise pas de tables, et je suis conscient que les tables doivent être utilisées uniquement pour les données tabulaires. Donc, c'est hors contexte ici. Tableaux réels et affichage: les propriétés des tableaux (+ autres variantes) sont des choses complètement différentes.
Mihai Frentiu

1
@Mihai Frentiu, de quelle manière affiche: table diffère de l'élément de table réel? J'aimerais vraiment l'apprendre si ce sont des choses complètement différentes, merci. =)
einord

2
@einord, l'utilisation de tableaux HTML implique la définition de toute la structure du tableau en code HTML. Le modèle de table CSS vous permet de faire en sorte que presque n'importe quel élément se comporte comme un élément de table sans définir l'arborescence de table entière.
Mihai Frentiu

1
@Mihai Frentiu, merci pour la réponse. Mais le comportement de l'élément table n'est-il pas la moitié du problème de l'utilisation des tables comme éléments de conception?
einord

123

De nos jours, vous devez utiliser la flexboxméthode (peut être adaptée à tous les navigateurs avec un préfixe de navigateur).

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

Plus d'informations: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


Voir www.w3schools.com/cssref/css3_pr_flex-grow.asp pour une bonne explication de l'attribut CSS. Une solution simple et moderne mais qui pourrait ne pas fonctionner dans les anciens navigateurs.
Edward

4
Flexbox FTW ... J'ai essayé toutes les autres solutions dans ce fil, rien ne fonctionne, j'essaie cette solution flexbox, cela fonctionne tout de suite ... CSS classique (c'est-à-dire avant l'avènement de la flexbox et de la grille css) craint totalement la mise en page ... règle flex et grille :-)
leo

Cela devrait être accepté comme la solution sélectionnée pour les temps actuels. C'est aussi la seule solution "non hackish".
Greg

cela fonctionne comme un charme, me sauvant la journée
lis

tsbaa (ce devrait être la réponse acceptée)
Ryo

104

Puisque c'est une question plutôt populaire, je suis enclin à partager une belle solution en utilisant BFC.
Échantillon Codepen des éléments suivants ici .

.left {
  float: left;
  width: 100px;
}
.right {
  overflow: auto;
}

Dans ce cas, overflow: autodéclenche le comportement du contexte et fait que l'élément droit ne se développe que sur la largeur restante disponible et il se développera naturellement sur toute la largeur s'il .leftdisparaît. Une astuce très utile et propre pour de nombreuses mises en page d'interface utilisateur, mais peut-être difficile de comprendre le "pourquoi cela fonctionne" au début.


1
Prise en charge du navigateur pour le débordement. IE4 !!! w3schools.com/cssref/pr_pos_overflow.asp
Yevgeniy Afanasyev

1
Parfois, je me retrouve avec une barre de défilement horizontale inutile sur l'élément .right. Quel est le problème?
Patrick Szalapski

1
@PatrickSzalapski Pouvez-vous faire un codepen ou similaire de l'affaire? Un débordement autopeut déclencher cela en fonction de son contenu. Vous pouvez également utiliser toute autre valeur de débordement pour obtenir le même effet, hiddenpeut mieux fonctionner pour votre cas.
mystrdat

1
Que signifie BFC et existe-t-il un bon didacticiel général expliquant BFC sur le Web?
lulalala

1
@lulalala, il représente le contexte de mise en forme des blocs . Voici une explication
bobo

23

Si vous n'avez pas besoin de compatibilité avec les anciennes versions de certains navigateurs (IE 10 8 ou moins par exemple), vous pouvez utiliser la calc()fonction CSS:

#left {
   float:left;
   width:180px;
   background-color:#ff0000;
}

#right {
   float: left;
   width: calc(100% - 180px);
   background-color:#00FF00;
}

1
IE 9 et plus prennent en charge l'attribut calc. Le seul problème avec cette solution est peut-être que nous ne connaissons pas la largeur de la colonne de gauche ou qu'elle change.
Arashsoft

eh bien, cette solution est peut-être orientée vers un boîtier flexible et en supposant que vous ne connaissez pas ou que vous ne vous souciez pas de la largeur du conteneur parent. Dans la question @alexchenco a dit qu'il voulait remplir "l'espace restant" donc ... je pense que c'est valide :) et oui, IE 9 est également pris en charge, merci pour la note;)
Marcos B.

15

@ La réponse de Boushley était la plus proche, mais un problème non résolu a été signalé. Le div droit prend toute la largeur du navigateur; le contenu prend la largeur attendue. Pour mieux voir ce problème:

<html>
<head>
    <style type="text/css">
    * { margin: 0; padding: 0; }
    body {
        height: 100%;
    }
    #left {
        opacity: 0;
        height: inherit;
        float: left;
        width: 180px;
        background: green;
    }
    #right {
        height: inherit;
        background: orange;
    }
    table {
            width: 100%;
            background: red;
    }
    </style>
</head>
<body>
    <div id="left">
        <p>Left</p>
    </div>
    <div id="right">
        <table><tr><td>Hello, World!</td></tr></table>
    </div>
</body>
</html>

http://jsfiddle.net/79hpS/

Le contenu est au bon endroit (dans Firefox), cependant, la largeur est incorrecte. Lorsque les éléments enfants commencent à hériter de la largeur (par exemple le tableau avec width: 100%), une largeur égale à celle du navigateur leur est attribuée, ce qui les fait déborder à droite de la page et crée une barre de défilement horizontale (dans Firefox) ou ne flotte pas et est poussée vers le bas ( en chrome).

Vous pouvez résoudre ce problème facilement en l'ajoutant overflow: hiddenà la colonne de droite. Cela vous donne la largeur correcte pour le contenu et le div. De plus, la table recevra la bonne largeur et remplira la largeur restante disponible.

J'ai essayé certaines des autres solutions ci-dessus, elles ne fonctionnaient pas pleinement avec certains cas de bord et étaient tout simplement trop compliquées pour justifier leur correction. Cela fonctionne et c'est simple.

S'il y a des problèmes ou des préoccupations, n'hésitez pas à les signaler.


1
overflow: hiddencorrige en effet cela, merci. (La réponse marquée est fausse BTW car rightprend en fait tout l'espace disponible sur le parent, vous pouvez le voir dans tous les navigateurs lors de l'inspection des éléments)
huysentruitw

1
Quelqu'un peut-il expliquer pourquoi cela fonctionne exactement? Je sais que j'ai vu une bonne explication quelque part ici, mais je n'arrive pas à la trouver.
tomswift

2
@tomswift Setting overflow: hiddenplace la colonne de droite dans son propre contexte de formatage de bloc. Les éléments de bloc occupent tout l'espace horizontal à leur disposition. Voir: developer.mozilla.org/en-US/docs/Web/Guide/CSS/…
John Kurlak

L' overflow:xxxattribut est la clé. Comme vous le dites, il cesse #rightde se dilater en dessous #left. Il résout très bien un problème que je rencontrais avec jQuery UI redimensionnable - avec un #rightensemble avec un attribut de débordement et #leftdéfini comme redimensionnable, vous avez une frontière mobile simple. Voir jsfiddle.net/kmbro/khr77h0t .
kbro

13

Voici un petit correctif pour la solution acceptée, qui empêche la colonne de droite de tomber sous la colonne de gauche. Remplacé width: 100%;par overflow: hidden;une solution délicate, si quelqu'un ne le savait pas.

<html>

<head>
    <title>This is My Page's Title</title>
    <style type="text/css">
        #left {
            float: left;
            width: 180px;
            background-color: #ff0000;
        }
        #right {
            overflow: hidden;
            background-color: #00FF00;
        }
    </style>
</head>

<body>
    <div>
        <div id="left">
            left
        </div>
        <div id="right">


right
    </div>
</div>

http://jsfiddle.net/MHeqG/2600/

[modifier] Consultez également un exemple de disposition à trois colonnes: http://jsfiddle.net/MHeqG/3148/


1
Solution parfaite pour barre de navigation flexible avec logo fixe.
Trunk

5

Si vous essayez de remplir l'espace restant dans une boîte flexible entre 2 éléments, ajoutez la classe suivante à un div vide entre les 2 que vous souhaitez séparer:

.fill {
  // This fills the remaining space, by using flexbox. 
  flex: 1 1 auto;
}

4

Utilisation display:flex

<div style="width:500px; display:flex">
   <div style="width:150px; height:30px; background:red">fixed width</div>

   <div style="width:100%; height:30px; background:green">remaining</div>
</div>

1
Cette réponse reproduit la réponse de Jordan de 2014.
TylerH

3

La réponse de Boushley semble être la meilleure voie à suivre pour organiser cela à l'aide de flotteurs. Cependant, ce n'est pas sans problèmes. L'imbrication flottante dans l'élément développé ne sera pas disponible pour vous; cela cassera la page.

La méthode montrée "en fait faux" quand il s'agit de l'élément en expansion - il n'est pas réellement flottant, il joue juste avec les éléments flottants à largeur fixe en utilisant ses marges.

Le problème est alors exactement cela: l'élément en expansion n'est pas flotté. Si vous essayez d'avoir des éléments flottants imbriqués dans l'élément en expansion, ces éléments flottants "imbriqués" ne sont pas vraiment imbriqués du tout; lorsque vous essayez de coller unclear: both; sous vos éléments flottants "imbriqués", vous finirez également par effacer les flotteurs de niveau supérieur.

Ensuite, pour utiliser la solution de Boushley, je voudrais ajouter que vous devez placer un div tel que le suivant: .fakeFloat {height: 100%; largeur: 100%; flotteur: gauche; } et placez-le directement dans le div étendu; tout le contenu du div étendu devrait alors aller dans cet élément fakeFloat.

Pour cette raison, je recommande d'utiliser des tableaux dans ce cas spécifique. Les éléments flottants ne sont vraiment pas conçus pour faire l'expansion que vous souhaitez, alors que la solution utilisant une table est triviale. Un argument est généralement avancé selon lequel le flottement est plus approprié pour les mises en page, pas pour les tableaux ... mais vous n'utilisez pas le flottant ici de toute façon, vous le simulez - et ce genre de résultat va à l'encontre de l'objectif de l'argument stylistique pour ce cas spécifique, dans mon humble avis.


N'utilisez pas de tableaux pour la mise en page. Vous ne pouvez pas définir leur hauteur. Ils se développent pour contenir leur contenu et n'honorent pas le débordement.
kbro

@kbro: N'utilisez pas de tableaux pour la mise en page car le contenu et l'affichage doivent être séparés. Mais si le contenu est structuré sous forme de tableau, il peut certainement être découpé avec overflow: hidden. jsfiddle.net/dave2/a5jbpc85
Dave

3

J'ai essayé les solutions ci-dessus pour une gauche liquide, et une droite fixe mais aucune d'entre elles n'a fonctionné (je sais que la question est pour l'inverse mais je pense que cela est pertinent). Voici ce qui a fonctionné:

.wrapper {margin-right:150px;}
.wrapper .left {float:left; width:100%; margin-right:-150px;}

.right {float:right; width:150px;}

<div class="wrapper"><div class="left"></div></div>
<div class="right"></div>

3

J'ai eu un problème similaire et j'ai trouvé la solution ici: https://stackoverflow.com/a/16909141/3934886

La solution est pour une division centrale fixe et des colonnes latérales liquides.

.center{
    background:#ddd;
    width: 500px;
    float:left;
}

.left{
    background:#999;
    width: calc(50% - 250px);
    float:left;
}

.right{
    background:#999;
    width: calc(50% - 250px);
    float:right;
}

Si vous voulez une colonne gauche fixe, changez simplement la formule en conséquence.


Non disponible sur certains navigateurs plus anciens comme IE8 et seulement partiellement sur IE9 ( caniuse.com/#feat=calc )
landi

2

Vous pouvez utiliser les propriétés CSS de la grille, c'est la façon la plus claire, la plus claire et la plus intuitive de structurer vos boîtes.

#container{
    display: grid;
    grid-template-columns: 100px auto;
    color:white;
}
#fixed{
  background: red;
  grid-column: 1;
}
#remaining{
  background: green;
  grid-column: 2;
}
<div id="container">
  <div id="fixed">Fixed</div>
  <div id="remaining">Remaining</div>
</div>


1

Je me demande que personne n'a utilisé position: absoluteavecposition: relative

Donc, une autre solution serait:

HTML

<header>
  <div id="left"><input type="text"></div>
  <div id="right">Menu1 Menu2 Menu3</div>
</header>

CSS

header { position: relative;  }
#left {
    width: 160px;
    height: 25px;
}
#right {
    position: absolute;
    top: 0px;
    left: 160px;
    right: 0px;
    height: 25px;
}

Exemple Jsfiddle


0

/ * * css * /

#search {
 position: absolute;
 width: 100px;
}
.right-wrapper {
  display: table;
  width: 100%;
  padding-left:100px;
}
.right-wrapper #navigation {
 display: table-cell;
 background-color: #A53030;
}

/ * * html * /

<div id="search"></div>
<div class="right-wrapper">
   <div id="navigation"></div>
</div>

0

J'ai une solution très simple pour cela! // HTML

<div>
<div id="left">
    left
</div>
<div id="right">
    right
</div>

// CSS

#left {
float:left;
width:50%;
position:relative;
background-color:red;
}
#right {
position:relative;
background-color:#00FF00;}

Lien: http://jsfiddle.net/MHeqG/


0

J'ai eu un problème similaire et j'ai trouvé ce qui a bien fonctionné

CSS:

.top {
width: auto;
height: 100px;
background-color: black;
border: solid 2px purple;
overflow: hidden;
}
.left {
float:left;
width:100px;
background-color:#ff0000;
padding: 10px;
border: solid 2px black;
}
.right {
width: auto;
background-color:#00FF00;
padding: 10px;
border: solid 2px orange;
overflow: hidden;
}
.content {
margin: auto;
width: 300px;
min-height: 300px;
padding: 10px;
border: dotted 2px gray;
}

HTML:

<div class=top>top </div>
<div>
    <div class="left">left </div>
    <div class="right">
        <div class="content">right </div>
    </div>
</div>

Cette méthode ne se terminera pas lorsque la fenêtre sera réduite, mais étendra automatiquement la zone de «contenu». Il gardera une largeur statique pour le menu du site (à gauche).

Et pour la démonstration de la zone de contenu à expansion automatique et de la zone verticale gauche (menu du site):

https://jsfiddle.net/tidan/332a6qte/


0

Essayez d'ajouter la position relative, la suppression widthet les floatpropriétés du côté droit, puis ajoutez leftet la rightpropriété avec une 0valeur.

En outre, vous pouvez ajouter une margin leftrègle dont la valeur est basée sur la largeur de l'élément de gauche (+ quelques pixels si vous avez besoin d'espace entre les deux) pour maintenir sa position.

Cet exemple fonctionne pour moi:

   #search {
        width: 160px;
        height: 25px;
        float: left;
        background-color: #FFF;
    }

    #navigation {  
        display: block;  
        position: relative;
        left: 0;
        right: 0;
        margin: 0 0 0 166px;             
        background-color: #A53030;
    }

0

.container {
  width:100%;
  display:table;
  vertical-align:middle;
}

.left {
  width:100%;
  display:table-cell;
  text-align:center;
}

.right {
  width:40px;
  height:40px;
  display:table-cell;
  float:right;
}
<div class="container">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div

Essaye ça. Ça a marché pour moi.


0

Je travaille sur ce problème depuis deux jours et j'ai une solution qui peut fonctionner pour vous et quiconque essaie de créer une largeur fixe réactive à gauche et que le côté droit remplisse le reste de l'écran sans s'enrouler autour du côté gauche. L'intention que je suppose est de rendre la page sensible aux navigateurs ainsi qu'aux appareils mobiles.

Voici le code

// Fix the width of the right side to cover the screen when resized
$thePageRefreshed = true;
// The delay time below is needed to insure that the resize happens after the window resize event fires
// In addition the show() helps.  Without this delay the right div may go off screen when browser is refreshed 
setTimeout(function(){
    fixRightSideWidth();
    $('.right_content_container').show(600);
}, 50);

// Capture the window resize event (only fires when you resize the browser).
$( window ).resize(function() {
    fixRightSideWidth();
});

function fixRightSideWidth(){
    $blockWrap = 300; // Point at which you allow the right div to drop below the top div
    $normalRightResize = $( window ).width() - $('.left_navigator_items').width() - 20; // The -20 forces the right block to fall below the left
    if( ($normalRightResize >= $blockWrap) || $thePageRefreshed == true ){
        $('.right_content_container').width( $normalRightResize );
        $('.right_content_container').css("padding-left","0px");
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+"&nbsp;"+'width: '+$rightwidthPosition+"&nbsp;"+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    
    }
    else{
        if( $('.right_content_container').width() > 300 ){
            $('.right_content_container').width(300);
        }
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+"&nbsp;"+'width: '+$rightwidthPosition+"&nbsp;"+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    }
    if( $thePageRefreshed == true ){
        $thePageRefreshed = false;
    }
}
/* NOTE: The html and body settings are needed for full functionality
and they are ignored by jsfiddle so create this exapmle on your web site
*/
html {
    min-width: 310px;
    background: #333;
    min-height:100vh;
}

body{
	background: #333;
	background-color: #333;
	color: white;
    min-height:100vh;
}

.top_title{
  background-color: blue;
  text-align: center;
}

.bottom_content{
	border: 0px;
	height: 100%;
}

.left_right_container * {
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #333 !important;
    background-color: #333 !important;
    display:inline-block;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
    font-weight: 400;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    border-radius: 0;
    box-sizing: content-box;
    transition: none;
}

.left_navigator_item{
	display:inline-block;
	margin-right: 5px;
	margin-bottom: 0px !important;
	width: 100%;
	min-height: 20px !important;
	text-align:center !important;
	margin: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	vertical-align: top;
}

.left_navigator_items {
    float: left;
    width: 150px;
}

.right_content_container{
    float: right;
    overflow: visible!important;
    width:95%; /* width don't matter jqoery overwrites on refresh */
    display:none;
    right:0px;
}

.span_text{
	background: #eee !important;
	background-color: #eee !important;
	color: black !important;
	padding: 5px;
	margin: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="top_title">Test Title</div>
<div class="bottom_content">
    <div class="left_right_container">
        <div class="left_navigator_items">
            <div class="left_navigator_item">Dashboard</div>
            <div class="left_navigator_item">Calendar</div>
            <div class="left_navigator_item">Calendar Validator</div>
            <div class="left_navigator_item">Bulletin Board Slide Editor</div>
            <div class="left_navigator_item">Bulletin Board Slide Show (Live)</div>
            <div class="left_navigator_item">TV Guide</div>
        </div>
        <div class="right_content_container">
            <div class="span_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper maximus tellus a commodo. Fusce posuere at nisi in venenatis. Sed posuere dui sapien, sit amet facilisis purus maximus sit amet. Proin luctus lectus nec rutrum accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut fermentum lectus consectetur sapien tempus molestie. Donec bibendum pulvinar purus, ac aliquet est commodo sit amet. Duis vel euismod mauris, eu congue ex. In vel arcu vel sem lobortis posuere. Cras in nisi nec urna blandit porta at et nunc. Morbi laoreet consectetur odio ultricies ullamcorper. Suspendisse potenti. Nulla facilisi.

Quisque cursus lobortis molestie. Aliquam ut scelerisque leo. Integer sed sodales lectus, eget varius odio. Nullam nec dapibus lorem. Aenean a mattis velit, ut porta nunc. Phasellus aliquam volutpat molestie. Aliquam tristique purus neque, vitae interdum ante aliquam ut.

Pellentesque quis finibus velit. Fusce ac pulvinar est, in placerat sem. Suspendisse nec nunc id nunc vestibulum hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id lectus dapibus, tempor nunc non, bibendum nisl. Proin euismod, erat nec aliquet mollis, erat metus convallis nulla, eu tincidunt eros erat a lectus. Vivamus sed mattis neque. In vitae pellentesque mauris. Ut aliquet auctor vulputate. Duis eleifend tincidunt gravida. Sed tincidunt blandit tempor.

Duis pharetra, elit id aliquam placerat, nunc arcu interdum neque, ac luctus odio felis vitae magna. Curabitur commodo finibus suscipit. Maecenas ut risus eget nisl vehicula feugiat. Sed sed bibendum justo. Curabitur in laoreet dolor. Suspendisse eget ligula ac neque ullamcorper blandit. Phasellus sit amet ultricies tellus.

In fringilla, augue sed fringilla accumsan, orci eros laoreet urna, vel aliquam ex nulla in eros. Quisque aliquet nisl et scelerisque vehicula. Curabitur facilisis, nisi non maximus facilisis, augue erat gravida nunc, in tempus massa diam id dolor. Suspendisse dapibus leo vel pretium ultrices. Sed finibus dolor est, sit amet pharetra quam dapibus fermentum. Ut nec risus pharetra, convallis nisl nec, tempor nisl. Vivamus sit amet quam quis dolor dapibus maximus. Suspendisse accumsan sagittis ligula, ut ultricies nisi feugiat pretium. Cras aliquam velit eu venenatis accumsan. Integer imperdiet, eros sit amet dignissim volutpat, tortor enim varius turpis, vel viverra ante mauris at felis. Mauris sed accumsan sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vel magna commodo, facilisis turpis eu, semper mi. Nulla massa risus, bibendum a magna molestie, gravida maximus nunc.</div>
        </div>
    </div>
</div>

Voici mon violon qui peut fonctionner pour vous comme pour moi. https://jsfiddle.net/Larry_Robertson/62LLjapm/


0

Règles pour les articles et les conteneurs;

Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}

Utilisez un espace blanc: nowrap; pour les textes des derniers postes pour leur déstructuration.

Article X% | Article Y% | Article Z%

Longueur totale toujours = 100%!

si

Item X=50%
Item Y=10%
Item z=20%

puis

Article X = 70%

L'élément X est dominant (les premiers éléments sont dominants dans la disposition CSS du tableau)!

Essayez max-content; propriété pour div inside pour étendre div dans conteneur:

div[class="item"] {
...
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
...

}


0

La solution la plus simple consiste à utiliser margin. Ce sera également réactif!

<div style="margin-right: auto">left</div>
<div style="margin-left: auto; margin-right:auto">center</div>
<div style="margin-left: auto">right</div>

0

La solution la plus simple consiste à rendre la largeur du div gauche égale à 100% - la largeur du div droit plus toute marge entre eux.

<div class="cont">
  <div class="search">
    Big Logo Text
  </div>
  <nav>
    <ul class="navbar">
      <li><a href="#1">NavLink1</a></li>
      <li><a href="#2">NavLink2</a></li>
      <li><a href="#3">NavLink3</a></li>
      <li><a href="#4">NavLink4</a></li>
      <li><a href="#5">NavLink5</a></li>
    </ul>
  </nav>
</div>

.cont{
  display: inline-grid;
  grid-template-columns: 160px 10px calc(100% - 170px);
  grid-template-rows: auto;
  grid-template-areas: "search .  navigation";
  width: 100%;
  height: auto;
  text-align: center;
}

.search {
  grid-area: search;
  height: 90px;
  background-color: #00FF00;
  line-height: 80px;
  font-size: 1.4rem;
  font-weight: 600;
}
nav {
  grid-area: navigation;
  height: 90px;
  background-color: #A53030;
}

.navbar{
  display: flex;
  height: 30px;
  width: 100%;
  padding: 0%;
  list-style-type: none;
  flex-flow: row wrap;
  flex: 0 1 auto;
  justify-content: space-between;
  align-content: flex-start;
  align-items: flex-start;
}

.navbar a{
    outline: 0;
    text-decoration: none;
}

https://codepen.io/tamjk/pen/dybqKBN


-2

J'ai rencontré ce même problème en essayant de mettre en page certains contrôles jqueryUI . Bien que la philosophie commune soit désormais «utiliser DIVau lieu deTABLE ", j'ai trouvé dans mon cas que l'utilisation de TABLE fonctionnait beaucoup mieux. En particulier, si vous avez besoin d'un alignement direct entre les deux éléments (par exemple, le centrage vertical, le centrage horizontal, etc.), les options disponibles avec TABLE donnent des commandes simples et intuitives pour cela.

Voici ma solution:

<html>
<head>
  <title>Sample solution for fixed left, variable right layout</title>
  <style type="text/css">
    #controls {
      width: 100%;
    }
    #RightSide {
      background-color:green;
    }
  </style>
</head>

<body>
<div id="controls">
  <table border="0" cellspacing="2" cellpadding="0">
    <TR>
      <TD>
        <button>
FixedWidth
        </button>
      </TD>
      <TD width="99%" ALIGN="CENTER">
        <div id="RightSide">Right</div>
      </TD>
    </TR>
  </table>
</div>
</body>
</html>

9
Vous ne devez jamais, jamais, jamais utiliser des tableaux pour formater autre chose que des données tabulaires. DÉJÀ.
mmmeff

1
Le problème avec les tableaux est que le balisage sera trompeur si ce que vous essayez d'afficher n'est pas censé être des données tabulaires. Si vous choisissez de négliger le principe du balisage porteur de sens, vous pourriez aussi bien revenir à<font> , <b>etc. HTML Evolved passé moins de se concentrer sur la présentation.
Vilinkameni

4
Je ne sais pas pourquoi tout le monde panique à propos des tables. Parfois, ils sont utiles.
Jandieg

Vous ne pouvez pas fixer la hauteur d'une table. Si le contenu s'agrandit, le tableau aussi. Et ça n'honore pas overflow.
kbro

@Jandieg: voir la réponse de Mihai Frentiu pour une explication. Le but de CSS est de séparer le contenu de l'apparence. L'utilisation de propriétés telles que display:tablepour obtenir l'apparence souhaitée des données non tabulaires est propre. Forcer des données non tabulaires comme des colonnes de page ou des contrôles de formulaire dans des tableaux HTML pour contrôler la mise en page est impur.
Dave
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.