Align content of 2 div vertically

Question

Align content of 2 div vertically

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

Hello, I have 2 div elements next to each other, in the first one there is an image of the height property in css with the value of auto and in the second one I want a simple menu to be found. What I want is for the menu to be at the bottom and to match the height of the first div.

The code I have is this:

   .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>

This gives me the following result:

And what I need is something like that

html css

asked by CarlosDayan 16.06.2017 в 08:16

source

2 answers

0

I recommend that you create a third div and place it on top of the one you have created, then give it the height and width values that best suit you for what you really want. That or give it a relative position and that the rest of the elements push it down.

Anyway, look at this link: link

Greetings.

answered by 16.06.2017 в 08:39

Do not do the date comparison [closed] well Error 401 when sending email with JavaScript and AJAX

score 1 · Accepted Answer

Good morning,

by parts; first the main container, the header . If you notice, the height of the header will be 0px, this is the first thing we are going to fix. To do this we simply have to add:
overflow: auto; to .mheader .

Now our header will have the size of the content and we can use it as a reference to position the rest of the elements.

Next, let our menu be in the bottom header. First we add:
position: absolute; bottom: 0px; to class .menu .
This makes the menu position to distance 0px from the 'bottom'.
So that the 'bottom' we refer to is not the entire page and is the 'bottom' of our header, we add to% .mheader the attribute position: relative; .

With this we already have the menu aligned to the correct 'bottom', that of our header.

Finally, since we are using absolute position in our menu, this is overlapping our image. This is easily fixed by adding% display: inline-block; to .menu .

I leave you a jsfiddle with all this:

link

Greetings