CODEWITHSUNDEEP
htmlcsspositioning
coffeeak
coffeeak

Reputation: 3120

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

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. Figure 1 Figure 2

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;
}

Upvotes: 1

Views: 2745

Answers (6)

Kristijan Iliev
Kristijan Iliev

Reputation: 4987

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>

Upvotes: 4

xaid
xaid

Reputation: 726

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>

Upvotes: 0

Michel Joanisse
Michel Joanisse

Reputation: 460

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 (e.g. 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

Upvotes: 1

CodeWeis
CodeWeis

Reputation: 856

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>

Upvotes: 1

E.Agolli
E.Agolli

Reputation: 550

Try to add line-height in your .brand-left div

Upvotes: 0

pradeep1991singh
pradeep1991singh

Reputation: 8375

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>

Upvotes: 0

Related Questions