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: /
Thank you.
See my answer beyond.
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/L2mPf/
Thank you.
See my answer beyond.
Share Improve this question edited May 23, 2017 at 12:17 CommunityBot 11 silver badge asked Feb 3, 2012 at 3:19 MelrosMelros 1,2132 gold badges18 silver badges34 bronze badges 4- Unfortunately not cause the divs will be user-generated. The number of divs could be any number. – Melros Commented Feb 3, 2012 at 20:23
- if you know the number of columns and have a fixed height and browser patibility isn't a big issue you could use css column – Caleb Doucet Commented Feb 3, 2012 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 ibination 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 Commented Feb 3, 2012 at 20:56
- really no ideas? not even in javascript? – Melros Commented Feb 4, 2012 at 17:35
3 Answers
Reset to default 7Ok, 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/L2mPf/1/
Thanks to @GGG for focusing me back on css and this solution.
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 ing aligned.
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)