How to have two side by side divs align to bottom?

Question

Instead of Figure 1, I would like Figure 2. In Figure 1, the menu and image are aligned to the top, but I would like them to be aligned to bottom.

Here is my CSS:

 <div id="branding">
      <div class="brand-left"></div>
      <div class="brand-right"></div>
 </div>

#branding {
    display: inline-block;
    width: 100%;
}

.brand-left {
    position: relative;
    float: left;
    width: 730px;
}

.brand-right {
    text-align: right;
    width: 222px;
    float: left;
}

Answer 1

Solution 1 (using flex)

You can achieve this behavior using display: flex . All you have to do is add this rules to your branding div:

#branding {
    display: flex; /* ADDED */
    align-items: flex-end; /* ADDED */
    width: 100%;
    border: 1px solid green; 
}

Here is a snippet

 #branding { display: flex; width: 100%; border: 1px solid green; align-items: flex-end; } #branding > div{ border: 1px solid blue; } .brand-left { position: relative; float: left; width: 730px; } .brand-right { text-align: right; width: 222px; float: left; } 

 <div id="branding"> <div class="brand-left">content</div> <div class="brand-right"> <img src="http://senda-arcoiris.info/images/100x100.gif"/> </div> </div> 

---

Solution 2 (using position relative/absolute)

Another solution without using flex would be removing the floats from child divs and position them absolute. Please see the snippet below:

 #branding { position: absolute; /* ADDED */ width: 100%; border: 1px solid green; } #branding > div{ position: relative; /* ADDED */ display: inline-block; /* ADDED */ border: 1px solid blue; bottom: 0; } .brand-left { width: 330px; /* I changed the width in order to fit in the snippet */ } .brand-right { text-align: right; width: 222px; } 

 <div id="branding"> <div class="brand-left">content</div> <div class="brand-right"> <img src="http://senda-arcoiris.info/images/100x100.gif"/> </div> </div> 

Answer 2

There are a number of ways to do this and ultimately it depends on what you're trying to accomplish and what your project requirements are (eg browser support). That said, one way is to position the element you want bottom aligned absolutely.

1. First, assign your branding container a position: relative; property and value
2. Second, float your logo right
3. Third, assign your container to which you want bottom aligned a position: absolute; property and value

Here is a working example: http://codepen.io/mjoanisse/pen/grvBwE

Answer 3

You can try using display: flex;

 .bottom { display: flex; bottom: 0; left: 0; position: fixed; width:100%; } .right { margin-left: auto; } 

 <div class="bottom"> <div class="left"> left </div> <div class="right"> right </div> </div> 

Answer 4

尝试在.brand-left div添加line-height

Answer 5

you can try it with flexbox

 #branding{ width:100%; display:flex; height:250px; background-color:green; align-items:flex-end; } .brand-left { position: relative; width: 730px; height:150px; background-color:pink; } .brand-right { text-align: right; width: 222px; background-color:blue; height:250px; } 

  <div id="branding"> <div class="brand-left"></div> <div class="brand-right"></div> </div> 

Answer 6

Just in case interested in without display: flex

 #branding { width: 100%; } .brand-left { position: relative; float: left; width: 750px; background: #f00; min-height: 250px; } .brand-left .nav { position: absolute; bottom: 0px; right: 15px; } .brand-left .nav li { display: inline; } .brand-right { text-align: right; width: 222px; float: left; background: #ff0; min-height: 250px; } 

 <div id="branding"> <div class="brand-left"> <ul class="nav"> <li><a href="#">Registration</a> </li> <li><a href="#">Log In</a> </li> </ul> </div> <div class="brand-right"></div> </div>