5

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.

Community
  • 1
  • 1
Melros
  • 1,238
  • 2
  • 18
  • 34
  • Unfortunately not cause the divs will be user-generated. The number of divs could be any number. – Melros Feb 03 '12 at 20:23
  • if you know the number of columns and have a fixed height and browser compatibility isn't a big issue you could use css column – Caleb Doucet Feb 03 '12 at 20:30
  • Since the layout is fluid in a responsive design the number of columns will always be different. If you schrink the browser window the number of items in a row will be 4, 3, 2, 1. This is why I'm looking for a comibination of justify all divs and the last line to be always left aligned. Or in other words: The space between the divs should be always equal so that the first and the last div in a row in each case touches the left and right edge of the wrapper and the divs in the last row will have the same space but left aligned. – Melros Feb 03 '12 at 20:56
  • really no ideas? not even in javascript? – Melros Feb 04 '12 at 17:35

3 Answers3

7

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.

Melros
  • 1,238
  • 2
  • 18
  • 34
  • JFTR, the relevant conversation - http://chat.stackoverflow.com/transcript/message/2551787#2551787 – Dagg Nabbit Feb 06 '12 at 01:41
  • you're welcome! here's also an article explaining exactly what I wanted to achieve with this back then: http://www.barrelny.com/blog/text-align-justify-and-rwd/ – Melros Jul 10 '13 at 17:39
  • @Melros I'm trying to accomplish the same thing and while this solution works, it causes a problem where there is a variable amount of empty space at the bottom of the container depending on the screen width due to an accumulation of the `blind` divs. Is there any way to avoid this without using media queries? Also, I can use flexbox if necessary but not grid layout. – RTF Jun 16 '20 at 15:55
0

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.

Gurvinder
  • 760
  • 2
  • 8
  • 16
0

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)

Seb Ashton
  • 692
  • 5
  • 16