CSS boxes will not float from lower right corner

Question

Hi there, I've been searching for this solution for a while now... [bla bla... google.. bla]...

I have created an example where I'm almost there, but not quite:

http://www.mikael-sandbox.com/puzzlecss/

What I have left here is that I want the number 1 to always be in the lower right corner. This is the case as long as I have ONE single row of blocks, but as the row breaks, the row is moved up. I want it to stay down. Any thoughts?

Answer 1

If the elements are being dynamically added to your page (even if they aren't), it would seem that the obvious solution would be to reverse the order of them. The elements that would extend beyond the bounds of the container are going to always wrap below. Found a couple links that may offer some insight regarding float and wrapping.

http://archivist.incutio.com/viewlist/css-discuss/33948

http://css.maxdesign.com.au/floatutorial/introduction.htm See "Where will a floated element move to?"

Edit
Is your container fixed width, and will your bit divs be consistent width? If so, then you know you can fit X number of bit divs on a row in your container. With that in mind, you would wrap a "row" in a div, and clear it on both sides. The sample below achieves the results I believe you are looking for. I'm fairly certain that you will not be able to achieve this with pure CSS. Floats just don't work the way you want them to.

<div id="container">
<div id="row_wrapper" style="clear:both;">
<div class="bit">10</div>
<div class="bit">11</div>
<div class="bit">12</div>
</div> <!--End row_wrapper -->

<div id="row_wrapper" style="clear:both;">
<div class="bit">1</div>
<div class="bit">2</div>
<div class="bit">3</div>
<div class="bit">4</div>
<div class="bit">5</div>
<div class="bit">6</div>
<div class="bit">7</div>
<div class="bit">8</div>
<div class="bit">9</div>
</div> <!--End row_wrapper -->
</div> <!--End container -->