Shane Lessard Shane Lessard - 3 months ago 26
CSS Question

Float a Div to bottom-right corner of a div

I'm having a lot of trouble finding a solution for floating an element to the bottom-right of a div.

It's dynamically aligned (both the div and the button). I need text to be able to wrap around the button, and the button to stick to the bottom right corner of a div.

I'm looking for anything, be it pure CSS or with some Javascript mixed in to get this functionality.

Basically:


<div class='container'>
<p class='text-left'>Dynamic text area</p>
<a class='btn'>Click Here!</a>
</div>


I need the .btn (also dynamic, may be one to three lines of text in it, width is set to 110px) to be floated to the right and sit on the bottom, and the text to wrap around the button (which throws absolute/fixed positioning out the window).

This has been marked as a duplicate, but there is no answer in that question that specifically solves this problem, as they all assume a fixed height.

Answer

You have to create a floating element that will "push" the child element down. Then with Javascript you calculate the height of the pusher element. Note that the pusher and the child container have to be declared BEFORE the text, so they are rendered as the "first character" of the container.

var parents = document.getElementsByClassName("parent");
for (var i = 0; i < parents.length; i++) {
  var parent = parents[i];
  var child = parent.getElementsByClassName("child")[0];
  var filler = parent.getElementsByClassName("filler")[0];
  var parenth = parent.offsetHeight;
  var childh = child.offsetHeight;
  filler.style.height = (parenth-childh) + "px";
}
.parent {
  background-color: grey;
}
.child {
  float: right;
  clear: right;
  background-color: green;
}
.filler {
  width: 0px;
  float: right;
}
<div class="parent">
  <div class="filler"></div>
  <div class="child">thingy thingythingy<br><br>thingy thingy thingy<br>thingy thingy thingy</div>
  asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd
</div>

Comments