CODEWITHSUNDEEP
htmlcss
Logan Hasbrouck
Logan Hasbrouck

Reputation: 416

Vertically align divs side by side at the bottom of their parent div

I am attempting to place multiple divs at the bottom of the page located within a 0 height div so that the container div doesn't cover part of the page and thus intercept any mouse click events. As of right now, the divs only start from the parent div line(0 height parent) and go downwards instead of upwards. Essentially, I am attempting to replicate the way facebook has its instant chat messenger set up while being as cross browser compatible as it can be, however, everything I have been able to find online relates to single elements, stacked elements (on top of each other) or use various methods like display:table-cell or display:flex which are not cross-browser compatible with older versions of IE.

If you who are reading this believes that it would be little of a problem compatibility wise(as in too few people use IE version X and prior), then you can throw the compatibility issue out the door (as long as it remains cross-browser).

Here is a rather crappy attempt at making a visual(couldn't find a line that would stand at the top of a text block so assume when the image stops that it is where the page would end).

______________
|            |
|            |
|            |
|            |
|            |
|       ___  |
|  __  |   | |
| |  | |   | |

Thanks.

Upvotes: 1

Views: 1325

Answers (2)

serraosays
serraosays

Reputation: 7869

Similar answer to Oriol. He/she left out the position:right on the absolutely positioned container but it's 99% the same as what I would do.

Demo: http://codepen.io/staypuftman/pen/YyOaBo

  • Create a relatively positioned container with the majority of your content
  • Place an absolutely positioned container within the first container
  • Create two inline-block items lined up together

HTML:

<div class="master-box">
  <div class="bottom-box-container">
    <div class="bottom-box-1">
    </div>
    <div class="bottom-box-2">
    </div>
  </div>
</div>

CSS:

.master-box {
  background-color: #b3d9ff;
  height: 400px;
  position: relative;
  width: 800px;
}

.bottom-box-container {
  position: absolute;
  bottom: 0;
  right: 0;
}

.bottom-box-1 {
  border: 1px solid #000;
  background-color: #ffedb3;
  display: inline-block;
  height: 200px;
  vertical-align: bottom;
  width: 200px;
}

.bottom-box-2 {
  border: 1px solid #000;
  background-color: #feb3ff;
  display: inline-block;
  height: 200px;
  vertical-align: bottom;
  width: 200px;
}

Upvotes: 0

Oriol
Oriol

Reputation: 288130

You can:

  • Display the items as inline-block to stack them horizontally.
  • Use vertical-align: bottom to align their bottom edge to the bottom of the line box.
  • Consider using white-space: nowrap to force them to stay in a single line box.
  • Place them inside an absolutely positioned inner wrapper with bottom: 0, i.e. placed at the bottom of its containing block.
  • Place that inner wrapper in a relatively positioned outer wrapper.

#outer-wrapper {
  height: 0;
  border: 1px solid;
  position: relative;
  margin-top: 70px;
}
#inner-wrapper {
  position: absolute;
  bottom: 0;
}
.item {
  display: inline-block;
  height: 30px;
  width: 40px;
  border: 1px solid blue;
  vertical-align: bottom;
}
.bigger.item {
  height: 50px;
}
<div id="outer-wrapper">
  <div id="inner-wrapper">
    <div class="item"></div>
    <div class="bigger item"></div>
  </div>
</div>

Upvotes: 3

Related Questions