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

419

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>

alexchenco
fonte
11
Remova a propriedade width e float no #navigation e ele funcionará.
9789 Johan Leino
relacionada stackoverflow.com/questions/4873832/...
Adrien Seja
1
@alexchenco: você pode atualizar a resposta escolhida para a fornecida por Hank
Adrien Seja o
@AdrienBe, na verdade, se você olhar para a resposta do mystrdat, acho que essa é ainda melhor. É apenas uma linha de css e é a única que funcionou para mim (estou fazendo três colunas com flutuação: esquerda; nas duas primeiras com larguras fixas e estouro: auto na última e funciona muito bem)
edwardtyl
@edwardtyl justo o suficiente. Na verdade, parece usar uma técnica semelhante à resposta que eu forneci para stackoverflow.com/questions/4873832/…
Adrien Seja

Respostas:

71

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>

Boushley
fonte
8
Você precisa remover a largura: 100% na div direita para fazê-la funcionar.
Johan Leino
250
Esta solução realmente tem um problema. Tente remover a cor do elemento ESQUERDA. Você notará que a cor do elemento RIGHT está realmente oculta sob ele. O conteúdo parece ir para o lugar certo, mas o div RIGHT em si não é.
Vyrotek
5
+1 Também resolveu o meu problema. O que aprendi foi que eu precisava remover "float: left" na div de preenchimento. Eu pensei que faria o implode página
Keyser
12
Talvez seja bom notar que a observação de Vyroteks é verdadeira, mas pode ser resolvida com estouro: oculto na coluna da direita. Denzel menciona isso, mas a sua não é a resposta aceita, então você pode perder isso ...
Ruudt
45
Isso está totalmente errado, o elemento certo tem tamanho completo, apenas o conteúdo é flutuado em torno do elemento esquerdo. Esta não é uma solução, apenas mais confusão.
mystrdat
268

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.

Hank
fonte
Quando você fecha a tag div, o conteúdo após essa div deve ser exibido em uma nova linha, mas isso não está acontecendo. Você pode, por favor, explicar o porquê?
fuddin
deve ser: margem esquerda: 190px; você esqueceu ';'. Também a margem esquerda deve ter 180 px.
fuddin
4
Nota: se você quiser o elemento de largura fixa à direita, coloque-o primeiro no código ou ele será empurrado para a próxima linha de qualquer maneira.
Trevor
2
@RoniTovi, o (s) elemento (s) flutuante (s) devem vir antes dos elementos não flutuantes no seu html. jsfiddle.net/CSbbM/127
Hank
6
Então, como você faz isso se deseja evitar uma largura fixa? Em outras palavras, permita que a coluna da esquerda tenha apenas a largura necessária e a coluna da direita faça o resto?
Patrick Szalapski
126

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 .

Mihai Frentiu
fonte
3
Não funciona quando o conteúdo dentro da div com width: auto é maior que o restante do espaço disponível na janela de exibição.
Nathan Loyer
4
@einord, esta solução não usa tabelas, e eu sei que as tabelas devem ser usadas apenas para dados tabulares. Então, está fora de contexto aqui. Tabelas e exibição reais: as propriedades da tabela (+ outras variações) são coisas completamente diferentes.
21313 Mihai Frentiu
1
@ Mihai Frentiu, de que maneira display: table difere do elemento atual da tabela? Eu realmente gostaria de aprender isso se forem coisas completamente diferentes, obrigado. =)
einord 18/10/2013
2
@einord, o uso de tabelas HTML implica a definição de toda a estrutura da tabela no código HTML. O modelo de tabela CSS permite que quase qualquer elemento se comporte como um elemento de tabela sem definir toda a árvore da tabela.
21313 Mihai Frentiu
1
@ Mihai Frentiu, obrigado pela resposta. Mas o comportamento do elemento da tabela não é metade do problema com o uso de tabelas como elementos de design?
einord
123

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/

Jordânia
fonte
Consulte www.w3schools.com/cssref/css3_pr_flex-grow.asp para obter uma boa explicação do atributo CSS. Uma solução simples e moderna, mas pode não funcionar em navegadores antigos.
Edward
4
Flexbox FTW ... Eu tentei todas as outras soluções neste segmento, nada funciona, eu tento essa solução flexbox, ele funciona imediatamente ... CSS clássico (ou seja, antes do advento do flexbox e da grade css) é uma merda no layout ... regra de flex e grid :-)
leo
Isso deve ser aceito como a solução selecionada para os tempos atuais. Além disso, é a única solução "não hackeada".
Greg
Isso funciona como um encanto, salvando meu dia!
lisnb
tsbaa (esta deve ser a resposta aceita)
Ryo
104

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.

mystrdat
fonte
1
Suporte do navegador para estouro. IE4 !!! w3schools.com/cssref/pr_pos_overflow.asp
Yevgeniy Afanasyev
1
Às vezes, acabo com uma barra de rolagem horizontal inútil no elemento .right. Qual é o problema aí?
Patrick Szalapski
1
@PatrickSzalapski Você pode criar um codepen ou similar do caso? O excesso autopode desencadear isso, dependendo do seu conteúdo. Você também pode usar qualquer outro valor de estouro para obter o mesmo efeito; hiddenpode funcionar melhor para o seu caso.
mystrdat
1
O que o BFC representa e existe um bom tutorial geral sobre o BFC na Web?
Lulalala
1
@lulalala significa contexto de formatação de bloco . Aqui está uma forma mais minuciosa explicação
bobo
23

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;
}
Marcos B.
fonte
1
IE 9 e superior suportam o atributo calc. O único problema com esta solução é que talvez não saibamos a largura da coluna esquerda ou ela mude.
Arashsoft
bem, talvez essa solução seja orientada para um caso flexível e supondo que você não saiba ou não se importe com a largura do contêiner pai. Na pergunta, @alexchenco disse que queria preencher "o espaço restante", então ... acho que é válido :) e sim, o IE 9 também é suportado, obrigado pela observação;)
Marcos B.
15

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.

Denzel
fonte
1
overflow: hiddenrealmente corrige isso, obrigado. (A resposta marcada está errado BTW como rightrealmente leva todo o espaço disponível no pai, você pode ver isso em todos os navegadores ao inspecionar elementos)
huysentruitw
1
Alguém pode explicar por que isso funciona exatamente? Sei que vi uma boa explicação em algum lugar aqui, mas não consigo encontrá-la.
tomswift
2
A configuração @tomswift overflow: hiddencoloca a coluna da direita em seu próprio contexto de formatação de bloco. Os elementos de bloco ocupam todo o espaço horizontal disponível para eles. Veja: developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/…
John Kurlak
O overflow:xxxatributo é a chave. Como você diz, ele deixa #rightde se expandir por baixo #left. Resolve muito bem um problema que eu estava tendo com o redimensionamento da interface do usuário do jQuery - com #rightset com um atributo overflow e #leftredimensionável, você tem um limite móvel simples. Veja jsfiddle.net/kmbro/khr77h0t .
kbro
13

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/

Dariusz Sikorski
fonte
1
Solução perfeita para barra de navegação flexível com logotipo fixo.
Trunk
5

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;
}
Helzgate
fonte
4

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>
Ildar Zaripov
fonte
1
Esta resposta duplica a resposta de Jordan a partir de 2014.
TylerH
3

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.

chinchi11a
fonte
Não use tabelas para o layout. Você não pode definir a altura deles. Eles se expandem para manter seu conteúdo e não respeitam o excesso.
kbro
@kbro: Não use tabelas para layout, pois o conteúdo e a exibição devem ser mantidos separados. Mas se o conteúdo estiver estruturado como uma tabela, certamente poderá ser cortado overflow: hidden. jsfiddle.net/dave2/a5jbpc85
Dave
3

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>
Dominic
fonte
3

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.

alex351
fonte
Não está disponível em alguns navegadores mais antigos como o IE8 e apenas parcialmente no IE9 ( caniuse.com/#feat=calc ) #
landi
2

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>

colxi
fonte
1

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

Buksy
fonte
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>
user1700099
fonte
0

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/

iamatsundere181
fonte
0

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/

Tidan
fonte
0

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

Tente isso. Funcionou para mim.

Spoorthi
fonte
0

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()+"&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>

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

Larry Robertson
fonte
0

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

}

Dmytro Yurchenko
fonte
0

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>
Hobey823
fonte
0

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

Tronco
fonte
-2

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>
J. Peterson
fonte
9
Você nunca deve nunca usar tabelas para formatar nada, exceto dados tabulares. SEMPRE.
mmmeff
1
O problema com as tabelas é que a marcação será enganosa se o que você está tentando exibir não pretende ser dados tabulares. Se você optar por negligenciar o princípio de significado levando marcação, você poderia muito bem voltar para <font>, <b>, etc. HTML evoluiu passado que se concentrar menos na apresentação.
Vilinkameni
4
Não sei por que todo mundo enlouquece com as mesas. Às vezes são úteis.
21715 Jandieg
Você não pode fixar a altura de uma mesa. Se o conteúdo aumentar, a tabela também. E isso não honra overflow.
kbro
@Jandieg: veja a resposta de Mihai Frentiu para uma explicação. Todo o objetivo do CSS é separar o conteúdo da aparência. Usar propriedades como display:tablepara obter a aparência desejada de dados não tabulares é limpo. Forçar dados não tabulares como colunas de página ou controles de formulário em tabelas HTML para controlar o layout não é limpo.
Dave