Float a Div to bottom-right corner of a div

Question

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.

Do you have a code example? – Tobias S Aug 22 '16 at 19:11 — Tobias S, Aug 22 '16 at 19:11

Jorge Fuentes González · Accepted Answer · 2016-08-22T19:48:32.470

4

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>

edited Aug 22 '16 at 19:48

answered Aug 22 '16 at 19:14

Jorge Fuentes González

11,568
4
44
64

And that ninja downvote? – Jorge Fuentes González Aug 22 '16 at 19:17
Absolute positioning will put the div where I want it to go, but it wont have a float effect that will allow text to wrap around the element. – Shane Lessard Aug 22 '16 at 19:31
Oh, forgot the wrap thingy. Let me edit this. – Jorge Fuentes González Aug 22 '16 at 19:32
Thanks! Also keep in mind, nothing has a specified height (parent or child), it's all dynamic based on what has been entered. – Shane Lessard Aug 22 '16 at 19:37
@ShaneLessard Check the answer now. – Jorge Fuentes González Aug 22 '16 at 19:48
Thanks Jorge. I threw it in a codepen for testing, it's not quite working but I'm fiddling with it now. Looks like that probably put me on the right track. – Shane Lessard Aug 22 '16 at 19:58
Depends a lot on how you have your webpage done. This is one way to do it (When I press run code snippet, it works), then you have to find a way to fit it on your code. As you say, this is the right track (One of the right tracks xD). If you have a more detailed question to make this code work on your site, you can edit your question. – Jorge Fuentes González Aug 22 '16 at 20:00

score 0 · Answer 2 · answered Aug 22 '16 at 19:13

0

Without seeing your existing code this is a guess since I'm not sure of any parameters at all.

.classNameHere{
float: right;
botom: 0;
position: absolute;
}

That would be the css you would add then apply the class name to your element.

answered Aug 22 '16 at 19:13

D. Cantatore

187
12

This will remove the button from the flow, meaning text wouldn't wrap around it unfortunately. – Shane Lessard Aug 22 '16 at 19:23
**There is a typo!** `botom: 0` --> `bottom: 0` – KargWare Oct 06 '21 at 12:36

Alex Cushing · Answer 3 · 2016-08-22T19:22:41.900

-3

Here ya go

  #foo {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background-color: green;
  }
#btnDiv{
    position: fixed;
    bottom: 0;
    right: 0;
  }

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
  <div id="foo">
      <button id="btnDiv">button</button>
  </div>
</body>
</html>

edited Aug 22 '16 at 19:22

answered Aug 22 '16 at 19:15

Alex Cushing

268
1
17

Float a Div to bottom-right corner of a div

3 Answers3