Fluid width with equally spaced DIVs + last row left aligned

Question

I have fixed width boxes in a fluid layout and text-align: justify them with this posted solution:

Fluid width with equally spaced DIVs

But since I have a couple of more rows in a responsive layout.

This is of course happens:

------    ------    ------    ------    
|    |    |    |    |    |    |    |    
|    |    |    |    |    |    |    | 
------    ------    ------    ------    
------    ------    ------    ------    
|    |    |    |    |    |    |    |    
|    |    |    |    |    |    |    | 
------    ------    ------    ------    
------          ------        ------    
|    |          |    |        |    |   
|    |          |    |        |    | 
------          ------        ------

But I like to have it like this:

------    ------    ------    ------    
|    |    |    |    |    |    |    |    
|    |    |    |    |    |    |    | 
------    ------    ------    ------    
------    ------    ------    ------    
|    |    |    |    |    |    |    |    
|    |    |    |    |    |    |    | 
------    ------    ------    ------    
------    ------    ------   
|    |    |    |    |    |  
|    |    |    |    |    |
------    ------    ------  

Of course justify does it's job but is there a solution to this without using javascript to do this?

I thought text-align-last: left could work, but it doesn't and it's not official eather yet.

Idea for a possible solution:

I came up with a possible javascript solution but I need your help for that.

Here's my idea for a possible solution:

To get the last line left aligned we would actually need to fill those missing spaces with invisible boxes. We could easily do that by hand but the number of divs are user generated and always different.

So weed need to know the number of boxes that are missing and append them to those we already have, to make it work:

So here is my (infantile) srcipting idea:

1. Count all divs
2. Divide them with 4 (cause we have 4 in a row)
3. If the SolutionA has no decimal, nothing will happen cause all is good
4. If the SolutionA has a decimal, remove it
5. SolutionA + 1 = SolutionB
6. SolutionB x 4 (cause we have 4 each in a row) = SolutionC
7. SolutionC - SolutionA = Number of divs we need to add.

I don't know if there is way to find out how many items are already in a row to pass that to javascript. This would be good cause then the formular would work for a responsive layout without adjusting the row number with each time they change with the browser width.

Is this a good idea?

I hope some would like to do this.

Here's a fiddle to work with: http://jsfiddle.net/L2mPf/

Thank you.

See my answer beyond.

Answer 1

Ok, here's the damn easy solution with css:

Simply add so many divs of how many in a row would be (in this case 4) and give them a height of 1px.

Nothing to see and all works like charm without javascript.

Here's the new fiddle: http://jsfiddle.net/L2mPf/1/

Thanks to @GGG for focusing me back on css and this solution.

Answer 2

You need to specify the height for the boxes.In your case right now the content of the boxes might be varying due to this the boxes are not coming aligned.

Answer 3

in your css set a min-height for your boxes.

.box-class {
    min-height: 100px;
    height: auto !important;
    height: 100px;
}

100px is for example and includes a min height fix for IE6

you may also want to float left (and display block) your boxes and then clearfix the parent container to keep it open if the alignment issue persists. (example of clearfix css in the link)