Ejercicio 4 - Layout con Floats para Restaurante Gusteau's
Descripción
El objetivo de este ejercicio es utilizar la propiedad float de CSS para organizar el contenido principal y la barra lateral en un diseño de dos columnas, adecuado para la temática del restaurante Gusteau\'s.
Tareas:
Contenido Principal (div.contenido):
[x] Aplicar float: left; para que el contenido principal flote a la izquierda.
[x] Establecer un ancho del 70% del contenedor, para dar espacio suficiente al contenido detallado sobre el restaurante.
[x] Estilizar el contenido con márgenes, padding y tipo de letra que reflejen la elegancia del restaurante.
Barra Lateral (div.sidebar):
[x] Aplicar float: right; para que la barra lateral flote a la derecha.
[x] Establecer un ancho del 30% del contenedor, adecuado para mostrar información secundaria como eventos especiales.
[x] Asegurar que el estilo de la barra lateral sea coherente con el diseño general de la página.
Clearfix:
[ ] Implementar un clearfix en el div#contenedor para asegurar que contenga completamente a los elementos flotantes.
[ ] Esto evita problemas de desbordamiento y asegura que el pie de página se posicione correctamente.
Estilos Adicionales y Ajustes:
[x] Asegurar que los textos y elementos dentro de ambas columnas estén bien alineados y espaciados.
[x] Considerar estilos como bordes sutiles o fondos de colores claros para diferenciar visualmente las secciones del contenido principal y la barra lateral.
Referencias:
Pueden consultar la documentación de CSS en Mozilla Developer Network (MDN) para obtener información detallada sobre el uso de la propiedad float.
Este ejercicio os permitirá aplicar y comprender el uso práctico de la propiedad float en CSS, enfocándose en cómo organizar el contenido de una manera que sea tanto funcional como estéticamente agradable y coherente con el tema del restaurante.
Ejercicio 4 - Layout con Floats para Restaurante Gusteau's
Descripción
El objetivo de este ejercicio es utilizar la propiedad float de CSS para organizar el contenido principal y la barra lateral en un diseño de dos columnas, adecuado para la temática del restaurante Gusteau\'s.
Tareas:
Contenido Principal (div.contenido):
float: left;para que el contenido principal flote a la izquierda.Barra Lateral (div.sidebar):
float: right;para que la barra lateral flote a la derecha.Clearfix:
clearfixen el div#contenedor para asegurar que contenga completamente a los elementos flotantes.Estilos Adicionales y Ajustes:
Referencias:
float.Este ejercicio os permitirá aplicar y comprender el uso práctico de la propiedad float en CSS, enfocándose en cómo organizar el contenido de una manera que sea tanto funcional como estéticamente agradable y coherente con el tema del restaurante.