Como mantenho flutuadores CSS em uma linha?

Eu quero ter dois itens na mesma linha usando float: lefto item à esquerda.

Não tenho problemas para conseguir isso sozinho. O problema é que eu quero que os dois itens permaneçam na mesma linha, mesmo quando você redimensionar o navegador muito pequeno . Você sabe ... como era com as mesas.

O objetivo é manter o item à direita do invólucro, não importa o quê .

Como dizer ao navegador usando CSS que preferiria esticar o conteúdo dodiv que envolvê-lo para que a float: right;div esteja abaixo do float: left; div?

o que eu quero:

                                   \
 +---------------+  +------------------------/
 | float: left;  |  | float: right;          \
 |               |  |                        /
 |               |  |content stretching      \   Screen Edge
 |               |  |the div off the screen  /  <---
 +---------------+  +------------------------\
                                             /

Embrulhe seus <div>s flutuantes em um contêiner <div>que use este hack de largura mínima no navegador:

.minwidth { min-width:100px; width: auto !important; width: 100px; }

Você também pode precisar definir "estouro", mas provavelmente não.

Isso funciona porque:

• A !importantdeclaração, combinada com, min-widthfaz com que tudo permaneça na mesma linha no IE7 +
• O IE6 não implementa min-width, mas possui um bug que width: 100pxsubstitui a !importantdeclaração, fazendo com que a largura do contêiner seja 100px.

Outra opção é, em vez de flutuar, definir a propriedade de espaço em branco nowrap como uma div pai:

.parent {
     white-space: nowrap;
}

e redefina o espaço em branco e use uma exibição de bloco embutido para que os divs permaneçam na mesma linha, mas você ainda pode dar uma largura.

.child {
    display:inline-block;
    width:300px;
    white-space: normal;
}

Aqui está um JSFiddle: https://jsfiddle.net/9g8ud31o/

Enrole suas moscas volantes em uma div com uma largura mínima maior que a largura combinada + margem das moscas volantes.

Não são necessários hacks ou tabelas HTML.

Solução 1:

display: célula de tabela (não é amplamente suportado)

Solução 2:

mesas

(Eu odeio hacks.)

Outra opção: não flutue sua coluna da direita; apenas dê uma margem esquerda para movê-lo além do flutuador. Você precisará de um hack ou dois para corrigir o IE6, mas essa é a ideia básica.

Você tem certeza de que os elementos no nível do bloco flutuante são a melhor solução para esse problema?

Muitas vezes, com dificuldades de CSS na minha experiência, verifica-se que a razão pela qual não vejo uma maneira de fazer o que quero é que fui pego em uma visão de túnel em relação à minha marcação (pensando "como posso fazer isso?" elementos fazem isso ? ") ao invés de voltar e olhar exatamente o que é preciso alcançar e talvez refazer meu html um pouco para facilitar isso.

Eu recomendaria o uso de tabelas para esse problema. Estou tendo um problema semelhante e, desde que a tabela seja usada apenas para exibir alguns dados e não para o layout da página principal, está correto.

Adicione esta linha ao seu seletor de elemento flutuante

.floated {
    float: left;
    ...
    box-sizing: border-box;
}

Isso impedirá que o preenchimento e as bordas sejam adicionados à largura, para que o elemento fique sempre na linha, mesmo que você tenha, por exemplo. três elementos com largura de 33.33333%

Quando o usuário reduz o tamanho da janela horizontalmente e isso faz com que os flutuadores sejam empilhados verticalmente, remova os flutuadores e, na segunda div (que era flutuante), use margin-top: -123px (seu valor) e margin-left: 444px (seu valor) para posicione os divs como eles apareceram com flutuadores. Quando isso é feito, quando a janela se estreita, a div do lado direito permanece no lugar e desaparece quando a página é muito estreita para incluí-la. ... o que (para mim) é melhor do que fazer com que a div do lado direito "salte" abaixo da div do lado esquerdo quando a janela do navegador é reduzida pelo usuário.

A maneira como resolvi isso foi usar jQuery. O motivo pelo qual fiz dessa maneira foi porque A e B tinham larguras percentuais.

HTML:

<div class="floatNoWrap">
    <div id="A" style="float: left;">
        Content A
    </div>
    <div id="B" style="float: left;">
        Content B
    </div>
    <div style="clear: both;"></div>
</div>

CSS:

.floatNoWrap
{
    width: 100%;
    height: 100%;
}

jQuery:

$("[class~='floatNoWrap']").each(function () {
    $(this).css("width", $(this).outerWidth());
});