Como fazer uma div preencher um espaço horizontal restante?

Eu tenho 2 divs: um no lado esquerdo e outro no lado direito da minha página. O lado esquerdo tem largura fixa e eu quero que o lado direito preencha o espaço restante.

#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>

Isso parece realizar o que você está buscando.

#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>

O problema que encontrei com a resposta de Boushley é que, se a coluna da direita for maior que a esquerda, ela apenas se enrolará à esquerda e continuará preenchendo todo o espaço. Este não é o comportamento que eu estava procurando. Depois de pesquisar várias soluções, encontrei um tutorial (agora o link está esgotado) sobre a criação de três páginas de coluna.

O autor oferece três maneiras diferentes, uma largura fixa, uma com três colunas variáveis ​​e outra com colunas externas fixas e uma largura variável média. Muito mais elegante e eficaz do que outros exemplos que encontrei. Melhorou significativamente minha compreensão do layout CSS.

Basicamente, no caso simples acima, flutue a primeira coluna à esquerda e forneça uma largura fixa. Em seguida, forneça à coluna da direita uma margem esquerda um pouco mais larga que a primeira coluna. É isso aí. Feito. Código de Ala Boushley:

Aqui está uma demonstração em 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>

Com o exemplo de Boushley, a coluna da esquerda mantém a outra coluna à direita. Assim que a coluna da esquerda termina, a direita começa a preencher todo o espaço novamente. Aqui a coluna da direita simplesmente se alinha mais na página e a coluna da esquerda ocupa sua grande margem de gordura. Não são necessárias interações de fluxo.

A solução vem da propriedade de exibição.

Basicamente, você precisa fazer as duas divs agirem como células da tabela. Portanto, em vez de usar float:left, você precisará usar as display:table-cellduas divs e, para a largura dinâmica div, você também precisará definir width:auto;. As duas divs devem ser colocadas em um contêiner de 100% de largura com a display:tablepropriedade

Aqui está o 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;}

E o HTML:

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

IMPORTANTE: Para o Internet Explorer, você precisa especificar a propriedade float na div dinâmica da largura, caso contrário, o espaço não será preenchido.

Espero que isso resolva seu problema. Se você quiser, pode ler o artigo completo que escrevi sobre isso no meu blog .

Atualmente, você deve usar o flexboxmétodo (pode ser adaptado a todos os navegadores com um prefixo de navegador).

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

Mais informações: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Como essa é uma pergunta bastante popular, estou inclinado a compartilhar uma boa solução usando o BFC.
Exemplo de Codepen do seguinte aqui .

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

Nesse caso, overflow: autodispara o comportamento do contexto e faz com que o elemento certo se expanda apenas para a largura restante disponível e, naturalmente, se expande para a largura total se .leftdesaparecer. Um truque altamente útil e limpo para muitos layouts de interface do usuário, mas talvez seja difícil entender o "por que funciona" primeiro.

Se você não precisar de compatibilidade com versões mais antigas de determinados navegadores (IE 10 8 ou menos, por exemplo), poderá usar a calc()função CSS:

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

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

A resposta de @ Boushley foi a mais próxima, no entanto, há um problema não abordado que foi apontado. A div direita ocupa toda a largura do navegador; o conteúdo assume a largura esperada. Para ver melhor este problema:

<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/

O conteúdo está no local correto (no Firefox), no entanto, a largura está incorreta. Quando os elementos filhos começam a herdar a largura (por exemplo, a tabela com width: 100%), eles recebem uma largura igual à do navegador, fazendo com que eles ultrapassem o lado direito da página e criem uma barra de rolagem horizontal (no Firefox) ou não flutuem e sejam pressionados ( em cromo).

Você pode corrigir isso facilmente adicionando overflow: hiddenà coluna da direita. Isso fornece a largura correta para o conteúdo e a div. Além disso, a tabela receberá a largura correta e preencherá a largura restante disponível.

Tentei algumas das outras soluções acima, elas não funcionavam totalmente com certos casos extremos e eram complicadas demais para justificá-las. Isso funciona e é simples.

Se houver algum problema ou preocupação, fique à vontade para criá-los.

Aqui está uma pequena correção para a solução aceita, que evita que a coluna da direita caia na coluna da esquerda. Substituído width: 100%;por overflow: hidden;uma solução complicada, se alguém não soubesse.

<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/

[edit] Verifique também um exemplo para o layout de três colunas: http://jsfiddle.net/MHeqG/3148/

Se você estiver tentando preencher o espaço restante em uma caixa flexível entre 2 itens, adicione a seguinte classe a uma div vazia entre os 2 que você deseja separar:

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

Usar 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>

A resposta de Boushley parece ser o melhor caminho a seguir para organizar isso usando carros alegóricos. No entanto, não é sem seus problemas. A flutuação aninhada no elemento expandido não estará disponível para você; isso vai quebrar a página.

O método mostrado basicamente "finge" quando se trata do elemento de expansão - na verdade, ele não está flutuando, está apenas tocando junto com os elementos flutuados de largura fixa usando suas margens.

O problema então é exatamente isso: o elemento de expansão não é flutuado. Se você tentar flutuar aninhado dentro do elemento de expansão, esses itens flutuantes "aninhados" não serão realmente aninhados; quando você tenta colocar um clear: both;item flutuante "aninhado" em seus itens flutuantes, você também limpa os carros alegóricos de nível superior.

Então, para usar a solução de Boushley, gostaria de acrescentar que você deve colocar uma div como a seguinte: .fakeFloat {height: 100%; largura: 100%; flutuar: esquerda; } e coloque isso diretamente dentro da div expandida; todo o conteúdo da div expandida deve estar dentro desse elemento fakeFloat.

Por esse motivo, eu recomendaria o uso de tabelas nesse caso específico. Os elementos flutuantes realmente não foram projetados para fazer a expansão que você deseja, enquanto a solução que usa uma tabela é trivial. Geralmente, é argumentado que flutuar é mais apropriado para layouts, não para tabelas .. mas você não está usando flutuação aqui de qualquer maneira, está fingindo - e isso meio que derrota o objetivo do argumento estilístico para esse caso específico, em minha humilde opinião.

Tentei as soluções acima para uma esquerda líquida e uma direita fixa, mas nenhuma delas funcionou (sei que a pergunta é inversa, mas acho que isso é relevante). Aqui está o que funcionou:

.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>

Eu tive um problema semelhante e encontrei a solução aqui: https://stackoverflow.com/a/16909141/3934886

A solução é para uma div central fixa e colunas laterais líquidas.

.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;
}

Se você deseja uma coluna esquerda fixa, basta alterar a fórmula de acordo.

Você pode usar as propriedades CSS da grade, é a maneira mais clara, limpa e intuitiva de estruturar suas caixas.

#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>

Eu me pergunto que ninguém usou position: absolutecomposition: relative

Portanto, outra solução seria:

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;
}

Exemplo de Jsfiddle

/ * * 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>

Eu tenho uma solução muito simples para isso! // 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;}

Link: http://jsfiddle.net/MHeqG/

Eu tive um problema semelhante e criei o seguinte, que funcionou bem

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>

Este método não quebra quando a janela é reduzida, mas expande automaticamente a área 'conteúdo'. Ele manterá uma largura estática para o menu do site (à esquerda).

E para demonstração da caixa de conteúdo com expansão automática e da caixa vertical esquerda (menu do site):

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

Tente adicionar posição relative, remover widthe floatpropriedades do lado direito, depois adicione lefte rightpropriedade com 0valor.

Além disso, você pode adicionar uma margin leftregra com o valor baseado na largura do elemento esquerdo (+ alguns pixels se precisar de espaço entre eles) para manter sua posição.

Este exemplo está funcionando para mim:

   #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;
    }

.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

Tente isso. Funcionou para mim.

Estou trabalhando nesse problema há dois dias e tenho uma solução que pode funcionar para você e qualquer outra pessoa tentando fazer uma largura fixa responsiva esquerda e fazer com que o lado direito preencha o restante da tela sem envolver o lado esquerdo. A intenção que assumo é tornar a página responsiva em navegadores e dispositivos móveis.

Aqui está o código

// 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()+" "+'width: '+$rightwidthPosition+" "+'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()+" "+'width: '+$rightwidthPosition+" "+'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>

Aqui está o meu violino que pode funcionar tanto para você quanto para mim. https://jsfiddle.net/Larry_Robertson/62LLjapm/

Regras para itens e contêineres;

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

Use espaço em branco: nowrap; para textos nos últimos itens por sua desestruturação.

Item X% | Item Y% | Item Z%

Comprimento total sempre = 100%!

E se

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

então

Item X = 70%

O item X é dominante (os primeiros itens são dominantes no layout da tabela CSS)!

Experimente o conteúdo máximo; propriedade para div inside para espalhar div no container:

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

}

A solução mais fácil é usar margem. Isso também será responsivo!

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

A solução mais simples é tornar a largura da div esquerda igual a 100% - a largura da div direita mais qualquer margem entre elas.

<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

Corri para o mesmo problema, tentando o layout de alguns controles jqueryUI . Embora a filosofia comum agora seja "use em DIVvez de TABLE", descobri que, no meu caso, usar TABLE funcionava muito melhor. Em particular, se você precisar de um alinhamento direto entre os dois elementos (por exemplo, centralização vertical, centralização horizontal etc.), as opções disponíveis em TABLE fornecem controles simples e intuitivos para isso.

Aqui está a minha solução:

<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>