sagraramirez.es

  • Aumentar fuente
  • Fuente predeterminada
  • Disminuir fuente
Advertencia
  • EU e-Privacy Directive

    This website uses cookies to manage authentication, navigation, and other functions. By using our website, you agree that we can place these types of cookies on your device.

    View e-Privacy Directive Documents

Home HTML y diseño web Web con DIVs como columnas de la misma altura

Web con DIVs como columnas de la misma altura

E-mail Imprimir PDF

El objetivo es conseguir poner dos DIVs en una web, uno al lado del otro (por ejemplo un menú y el contenido), con colores de fondo distintos y que los dos queden con la misma altura. El caso más normal es que el menú queda más corto, por lo que se dejaría sin rellenar la parte inferior (hasta que apareciera el pie).

He encontrado en Internet 2 posibles soluciones:

La primera consiste en emular una tabla con la propiedad "display". Necesitaremos un DIV para la tabla (display:table), un DIV para la fila (display:table-row) y luego en cada columna añadimos el atributo display:table-cell. El ejemplo lo podemos ver aquí.

La segunda consiste en añadir un borde a la columna más alta (que será la del contenido) de la misma anchura y color que el menú. Para un menú a la derecha tendríamos:

#contenido {background-color:red; border-right: 200px solid yellow}
#menu {background-color:yellow; float:right; width:200}

El problema de esta solución es que si por alguna razón el menú es más alto, no quedaría bien. Fuente aquí.

 

Escribir un comentario


Código de seguridad
Refescar