2

Hola tengo 2 elementos div uno a lado del otro, en el primero se encuentra una imagen la propiedad de height en css con el valor de auto y en el segundo quiero que se encuentre un menú sencillo. Lo que quiero es que el menu quede en la parte de abajo y que coincida con la altura del primer div.

El código que tengo es este:

   .mheader {
	    width:100%;
	    height:auto;
    }

    .logo {
	    width:25%;
	    background-color:#27AD57;
	    float:left;
    }

    .logo_img {
	    width:100%;
    }

    .menu {
	    width:75%;
	    float:right;
	    vertical-align:bottom;
        text-align:bottom;
	    background-color:#2600FF;
    }
    <div class="mheader" >

	    <div class="logo" >
	        <img class="imagen" alt="imagen"/>
	    </div>

	    <div class="menu" >
		    <span><a href="#" >Link A</a></span>
		    <span><a href="#" >Link B</a></span>
		    <span><a href="#" >Link C</a></span>
		    <span><a href="#" >Link D</a></span>
	    </div>

   </div>

Esto me arroja el siguiente resultado:

Resultado 1

Y lo que necesito es algo así

Resultado bueno

3
  • Mira si el enlace a mi respuesta en esta otra pregunta te puede ayudar: es.stackoverflow.com/a/36074/16108 Commented el 16 jun. 2017 a las 6:19
  • Prueba con un bottom: 0px en menu
    – Lithorell
    Commented el 16 jun. 2017 a las 6:21
  • 2
    Estupenda forma de hacer preguntas.
    – Héctor
    Commented el 16 jun. 2017 a las 6:26

2 respuestas 2

1

Buenas,

por partes; primero el contenedor principal, el header. Si te fijas, el height del header estará a 0px, esto es lo primero que vamos a arreglar. Para ello simplemente tenemos que añadir:
overflow: auto; a .mheader.

Ahora nuestro header tendrá el tamaño del contenido y podemos usarlo como referencia para posicionar el resto de elementos.

Next, que nuestro menú esté en el bottom del header. Primero añadimos:
position: absolute; bottom: 0px; a la clase .menu.
Esto hace que la posición del menú sea a distancia 0px del 'bottom'.
Para que el 'bottom' al que hacemos referencia no sea la página entera y sea el 'bottom' de nuestro header, le añadimos a
.mheader el atributo position: relative;.

Con esto ya tenemos el menú alineado al 'bottom' correcto, el de nuestro header.

Por último, como estamos usando posición absoluta en nuestro menú, este está solapando nuestra imagen. Esto se arregla fácilmente añadiendo
display: inline-block; al .menu.

Te dejo un jsfiddle con todo esto:

http://jsfiddle.net/o2gxgz9r/8604/

Un saludo

2
  • Hola, gracias amigo esto me funciono bien, aunque también encontre y probé esto: w3schools.com/howto/howto_css_equal_height.asp y me gustaría saber cual de las dos formas es mas cómoda de usar Commented el 16 jun. 2017 a las 16:37
  • Buenas, la solución que comentas hace que tus div se comporten como tablas. Ese sería el único inconveniente que le veo. En mi caso ya he tenido problemas de estilos por culpa de las tablas en html, por eso optaría por evitarlas en la medida de lo posible. Un saludo Commented el 19 jun. 2017 a las 13:30
0

Te recomiendo que crees un tercer div y lo coloques encima de ese que tienes creado, después dale los valores de altura y anchura que mejor te vayan para lo que realmente quieres. Eso o dale una posición relativa y que el resto de elementos lo empujen hacia abajo.

De todos modos mira este link: http://www.danielmayor.com/css-alineacion-abajo-como-posicionar-en-la-parte-baja

Un saludo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.