How to reflow DIV boxes in CSS to stick to bottom right? - css

Question

Let's say I have a DIV that's styled as a square, and it has squares (DIV) inside of it. I'd like the squares inside the main DIV to stack in the lower right. I can use float: right to to get them on the right edge, but how do I make them stack at the bottom rather than the top?

Answer 1

Should you not find a good CSS solution, jQuery can easily handle this:
Fiddle
$('.inner').each(function(i) {
$this = $(this);
var bottomPos = ($this.outerHeight())*i;
$this.css('bottom', bottomPos);
});
HTML and CSS
<style type="text/css">
#outer {
width: 400px;
height: 600px;
background-color: #eee;
position: relative;
}
.inner {
width: 100px;
height: 100px;
background-color: #ccc;
border: 1px solid #aaa;
position: absolute;
right: 0;
}
</style>
<div id="outer">
<div class="inner">One</div>
<div class="inner">Two</div>
<div class="inner">Three</div>
<div class="inner">Four</div>
</div>

Answer 2

To get a child to stick to the very bottom of a container, set the position:relative and bottom:0px. However this will not stack them, you'd have to set the bottom to another value for a child to be above another child. You could use javascript or jquery to dynamically fit them if the sizes are variable like this:
$('#second_element').css('bottom', $('#bottom_element').height() + 5);
Note: 5 is just for padding

Answer 3

You can use display:table-cell with vertical-align:bottom
Here's a good tutorial on using "table-cell" layout:
http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/

Answer 4

Depending on what you mean by "stack at the bottom", you can achieve this with the use of an inner container div that is aligned at the bottom. Then these child squares can be float right inside of this container div, causing them to stick to the bottom of the main div, like so:
<div id="main_div" style="position: relative; height: 500px; width: 500px;">
<div id="container_div" style="position: absolute; bottom: 0; right: 0;">
<div class="right_floated_square">Square 1 Content</div>
<div class="right_floated_square">Square 2 Content</div>
<div class="right_floated_square">Square 3 Content</div>
</div>
</div>
What this would do is flow these squares right to left at the bottom of the main div. However, these child squares would still flow top to bottom inside the container div. If you wanted them to vertically flow in reverse (bottom up), I'm not sure if that would be possible without some complex layout javascript.
Obviously, the exact styling of "right_floated_square" has been removed for brevity.

Answer 5

Here is a pure css version: http://jsfiddle.net/zkhWA/1/
Basically place your little squares in another absolutely positioned element that is grounded to the bottom right corner of the big square using:
position: absolute;
right: 0px;
bottom: 0px;
Then make all the little squares float right:
float: right;
Don't forget to apply position:relative to the big square.