¿Cómo mantengo los flotantes CSS en una línea?

Quiero tener dos elementos en la misma línea usando float: leftpara el elemento de la izquierda.

No tengo problemas para lograr esto solo. El problema es que quiero que los dos elementos permanezcan en la misma línea incluso cuando cambie el tamaño del navegador muy pequeño . Ya sabes ... como fue con las mesas.

El objetivo es evitar que el elemento de la derecha se ajuste sin importar qué .

¿Cómo le digo al navegador usando CSS que prefiero estirar el contenidodiv que envolverlo para que el float: right;div esté debajo del float: left; div?

lo que quiero:

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

Envuelva sus correos flotantes <div>en un contenedor <div>que use este truco de ancho mínimo de navegador cruzado:

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

Es posible que también deba configurar "desbordamiento", pero probablemente no.

Esto funciona porque:

• La !importantdeclaración, combinada con min-widthhacer que todo permanezca en la misma línea en IE7 +
• IE6 no se implementa min-width, pero tiene un error que width: 100pxanula la !importantdeclaración y hace que el ancho del contenedor sea de 100 px.

Otra opción es, en lugar de flotar, establecer la propiedad de espacio en blanco ahora en un div padre:

.parent {
     white-space: nowrap;
}

y reinicie el espacio en blanco y use una pantalla de bloque en línea para que los divs permanezcan en la misma línea pero aún puede darle un ancho.

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

Aquí hay un JSFiddle: https://jsfiddle.net/9g8ud31o/

Envuelva sus flotadores en un div con un ancho mínimo mayor que el ancho combinado + margen de los flotadores.

No se necesitan hacks ni tablas HTML.

Solución 1:

display: table-cell (no ampliamente compatible)

Solución 2:

mesas

(Odio los hacks)

Otra opción: no flote su columna derecha; solo dale un margen izquierdo para moverlo más allá del flotador. Necesitará un truco o dos para arreglar IE6, pero esa es la idea básica.

¿Estás seguro de que los elementos flotantes a nivel de bloque son la mejor solución para este problema?

A menudo, con las dificultades de CSS en mi experiencia, resulta que la razón por la que no puedo ver la forma de hacer lo que quiero es que me he quedado atrapado en una visión de túnel con respecto a mi marcado (pensando "¿cómo puedo hacer esto? elementos hacen esto ? ") en lugar de volver atrás y mirar qué es exactamente lo que necesito lograr y tal vez reelaborar mi html ligeramente para facilitar eso.

Recomendaría usar tablas para este problema. Tengo un problema similar y siempre que la tabla se use para mostrar algunos datos y no para el diseño de la página principal, está bien.

Agregue esta línea a su selector de elemento flotante

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

Evitará que se agreguen relleno y bordes al ancho, por lo que el elemento siempre se mantendrá en fila, incluso si tiene, por ejemplo. tres elementos con ancho de 33.33333%

Cuando el usuario reduce el tamaño de la ventana horizontalmente y esto hace que los flotadores se apilen verticalmente, elimine los flotadores y en el segundo div (que era un flotador) use margin-top: -123px (su valor) y margin-left: 444px (su valor) a Posicione los divs tal como aparecieron con carrozas. Cuando se hace de esta manera, cuando la ventana se estrecha, la división del lado derecho permanece en su lugar y desaparece cuando la página es demasiado estrecha para incluirla. ... que (para mí) es mejor que hacer que el div del lado derecho "salte" debajo del div del lado izquierdo cuando el usuario reduce la ventana del navegador.

La forma de evitar esto fue usar un poco de jQuery. La razón por la que lo hice de esta manera fue porque A y B eran porcentajes de ancho.

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