Possible To Float Right AND Stick To Bottom Simultaneously (Without Using Margin)?

HTML & CSS
1

So I’m trying to get a div to stick to the bottom AND the right of its containing div.

For example, like this:

http://stackoverflow.com/questions/5335976/how-can-i-position-nested-divs-at-the-bottom-and-float-right (the solution they recommended on Stack Overflow isn’t working for me)

Now, I HAVE found a solution that enables me to do this; the only problem is, I feel it’s a somewhat inelegant one. What I do is this:

  1. Use float right to make the bottom div float right (duh).
  2. Give “bottom right” margin on top that is equal to the difference between the height of main div and bottom right.

Here is the CSS I’ve used:

#maindiv {
margin-top: 100px;
width: 1050px;
height: 104px;
}

#bottomright {
display: inline;
width: 400px;
height: 35px;
background-color: #FD5A5A;
float: right;
bottom: 0;
margin-top: 69px;

}

My problem is this: I feel this margin solution is a somewhat inelegant and convoluted one. It requires calculating the difference between the two divs which, although easy, would become a nuisance if I were to do a lot of projects that have this “floating right aligned div” feature in them.

So what I was wondering is, is there an alternative way to do this?

Position: absolute plus bottom: 0 doesn’t work because absolute positioning seems to override “float right”

2

Put your three divs inside another div that is the same height as the smaller divs and three times the width of the sum of the smaller divs. Then position the outer div to be at the bottom right corner of its parent. Float the smaller divs to the right and use a left margin to separate them. here is the code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Bottom float right</title>
<style type="text/css">
#wrap { border:1px solid #00F; position:relative; top:0px; left:0px; width:300px; height:200px; margin-left:100px;  }
#outer { border:1px solid #0FF; position:absolute; bottom:0px; right:0px; width:180px; height:30px;  }
#outer div { float:right; width:50px; height:30px; border:1px solid #F00; margin-left:10px; }
</style>
</head>

<body>

<div id="wrap">
  <div id="outer">
    <div id="one">
    </div>
    <div id="two">
    </div>
    <div id="three">
    </div>
  </div>
  <!-- end outer -->
</div>
<!-- end wrap -->

</body>

</html>
3

Position absolute removes the element from the flow so it can no longer be floated and therefore float is redundant and has no effect. You could simply have said bottom:0; right:0 to achieve what you want for a single element. :slight_smile:

If you want two or three divs at the bottom then you could absolutely place all of them there or more easily do what Allan P suggests and just place the wrapper at the bottom and the float right (although you will need to add more width that Allan did for the container so that it is wide enough for the three elements plus margins.)

You should be aware that with either method you are still removing the elements from the flow so you will no longer have text that will wrap around those objects as such (unless they are in the absolute container with the floated divs and then will only respect that context).