CSS floats - ¿cómo los mantengo en una línea?

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

.parent {
     white-space: nowrap;
}

Y restablezca 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+margen combinado de los flotadores.

No se necesitan hacks o tablas HTML.

Solución 1:

Pantalla: celda de tabla (no ampliamente soportada)

Solución 2:

Cuadros

(Odio los hacks.)

Otra opción: No flotar la columna derecha; simplemente dale un margen izquierdo para moverla más allá del flotador. Necesitarás un hack o dos para arreglar IE6, pero esa es la idea básica.

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

A menudo con dificultades CSS en mi experiencia resulta que la razón por la que no puedo ver una manera 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 estos elementos hacen esto?") en lugar de retroceder y mirar qué es exactamente lo que necesito lograr y tal vez reelaborar mi html ligeramente para facilitar que.

Recomiendo usar tablas para este problema. estoy teniendo un problema similar y siempre y cuando la tabla se utiliza solo para mostrar algunos datos y no para el diseño de la página principal que está bien.

Agregue esta línea a su selector de elementos flotantes

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

Evitará que el relleno y los bordes se agreguen al ancho, por lo que el elemento siempre permanecerá en la fila, incluso si tiene por ejemplo. tres elementos con anchura 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) para posicionar los divs tal como aparecían con los flotadores. Cuando se hace de esta manera, cuando la ventana se estrecha, el div del lado derecho permanece en su lugar y desaparece cuando la página es demasiado estrecha para incluirla. ... que (para mí) es mejor que tener el div del lado derecho "saltar" por debajo de la div del lado izquierdo cuando la ventana del navegador es reducida por el usuario.

La forma en que conseguí 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 anchos porcentuales.

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