Using html to align a text div inline with the bottom of an adjaecent div

Question

I have a logo imageas part of a footer of a website I am editing that can be simplified below.

<div style="float:left"> the logo </div> <div style="float:right"> text links </div>

At the moment this is fine. The logo appears on the left and the links on the far right. However the only problem I have is that the text is aligned at the top of the logo div; I would like it to be aligned with the bottom of the logo div so that the web page is even at the end.

I've tried "align=bottom" in the text div but that doesn't seem to work

Edit to show problem:

Current set up:

!!!!!!!!!!!             <div 2>  *default top alignment*
!!<div 1>!!
!!!!!!!!!!!

Preferred set up:

!!!!!!!!!!!
!!<div 1>!!
!!!!!!!!!!!             <div2>  *Preferred align along the bottom"

I don't quite get what you want to achieve? Can you specify or add an image of what your goal is? — fnune, Dec 16 '15 at 12:40
Possible duplicate of [CSS Vertical align does not work with float](http://stackoverflow.com/questions/11718134/css-vertical-align-does-not-work-with-float) — Szabolcs Páll, Dec 16 '15 at 12:43
I have edited to show a better representation of the problem — algorhythm, Dec 16 '15 at 12:47

score 1 · Accepted Answer · answered Dec 16 '15 at 13:02

.parentDiv {
  position:relative;
  width:100%;
  height:100px;
  display:inline-block;
  }

.div1 {
  position:absolute;
  left:0px;
  bottom:0px;
  display:inline-block;
  width:100px;
  height:60px;
  background:#ddd;
  }

.div2 {
  position:absolute;
  right:0px;
  bottom:0px;
  display:inline-block;
  width:300px;
  height:50px;  
  background:#ccc;
  }

<div class="parentDiv">
  <div class="div1">logo</div>
  <div class="div2">Some text aligned to bottom</div>
</div>

I had to use html only but transferring those values to html worked a treat. Thank you — algorhythm, Dec 16 '15 at 13:43

score 1 · Answer 2 · answered Dec 16 '15 at 13:03

A possible solution is the use of flexbox and the align-itemsproperty. For more information you can have a look at http://philipwalton.github.io/solved-by-flexbox/demos/grids/

.grid {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: end;
}

.grid > div {
  padding: 10px;

  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.content {
  padding: 10px;
  background: #ccc;
}

<div class="grid">
  <div class="left">
  <div class="content">Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh. Ut interdum ligula id metus hendrerit cursus. Integer eu leo felis. Aenean commodo ultrices nunc, sit amet blandit elit gravida in.</div>
  </div>
  <div class="right">
  <div class="content">DIV 2</div>
  </div>
</div>

Using html to align a text div inline with the bottom of an adjaecent div

2 Answers2