¿Cómo organizarlo para que el menú lateral, el contenido y el lado floten a la derecha en consecuencia sin que uno sea más largo que el otro? Soy un principiante en diseño web

Trabajé con un diseñador que era muy TOC para hacer esto. 🙂 HTML no fue realmente diseñado para eso: fue diseñado para ser muy flexible, con contenedores que cambian de tamaño para diferentes cantidades de contenido.

Por lo tanto, se han utilizado varios hacks a lo largo de los años para obtener alturas de contenedor iguales. Como principiante, es posible que aún no se haya encontrado con ellos.

La forma más simple, por supuesto, es tener una caja grande que encierra sus dos columnas, y ambas cajas tienen el mismo color de fondo, por lo que la longitud de cada columna no es obvia. No hay problema para resolver. Pero, ¿qué pasa si tiene diferentes colores de fondo en cada columna? Entonces la diferencia es obvia. O peor, ¿qué pasa si tiene un borde obvio en cada columna? Es un dolor aún mayor para “igualar”.

Mi amigo diseñador vino del mundo de la impresión, y no hay nadie más exigente con la exactitud que los impresores. 🙂 Así que al principio usé técnicas de Javascript para “forzar” que las columnas coincidieran en longitud.

Luego me encontré con métodos de CSS puro para esto. ¡Mucho más bonito! Hay un montón de ellos, y son bastante inteligentes. Aquí hay un gran resumen de eso: el que más he usado es el método “One True Layout”. Ancho de fluido Columnas de altura igual | CSS-Tricks

Puede usar Bootstrap · El marco front-end más popular del mundo para dispositivos móviles y receptivos. o cuadrículas UIkit para personalizar fácilmente su diseño y hacer lo que quiera.

Hola, me gusta la respuesta con Bootstrap. Existen métodos que ya están disponibles para usted utilizando los diseños actuales: la clase de “mazo de cartas” asegura que todas las columnas en el DIV tengan la misma longitud. En cuanto al menú que flota hacia la derecha, solo asegúrese de que la carta que contiene el menú sea parte del mazo.

Pon la altura de los div en un porcentaje específico.