Thanks, But how will this work on smaller devices when the three divs stack on top of each other?

ralphm
—
2014-03-04T07:52:52Z —
#6

ReGGaeBOSS said:

Thanks, But how will this work on smaller devices when the three divs stack on top of each other?

You use @media queries to remove display: table on small screens and use display: block (or similar) instead.

ReGGaeBOSS
—
2014-03-04T10:26:47Z —
#7

ralph_m said:

You use @media queries to remove display: table on small screens and use display: block (or similar) instead.

Hmm it looks like I wont be able to use this method on this project, even tho the trick does work. Do you know how this could be done with JS? So that the div checks the height of his siblings and applies this to itself.

ralphm
—
2014-03-04T13:25:18Z —
#8

ReGGaeBOSS said:

Hmm it looks like I wont be able to use this method on this project, even tho the trick does work.

You know we've got to ask Why, right?

ReGGaeBOSS
—
2014-03-06T07:33:21Z —
#9

ralph_m said:

You know we've got to ask Why, right?

=) Well, the container can have an "unlimited" number of a block with the width 25% and a dynamic height, so If you put 5-6 of these blocks in the container that would create two rows and the container would be twice as high. And then we have this odd block, who doesnt look like the rest, and only contains a background image and a small amount of text. It is this block that I want to inherit the height of it siblings (the block before or after). So wouldnt the table-cell option break if the container is filled with more blocks and more rows?

Hope you understand what i am trying to explain, my english isn't always the best=)

ralphm
—
2014-03-06T09:42:57Z —
#10

I don't understand, but I strongly suspect this is not a reason to rule out display: table and/or media queries.

ReGGaeBOSS
—
2014-03-09T17:04:11Z —
#11

ralph_m said:

I don't understand, but I strongly suspect this is not a reason to rule out display: table and/or media queries.

The div with class "match" is the only one who differs from the others regarding height of the content, but it should still have a background-image that stretches 100% height. It's siblings sets the height, and is dynamic. So what I want is the "match" div to inherit the same height as the other divs. But I cannot get it to work.

ralphm
—
2014-03-09T22:15:44Z —
#12

You can't float an element with display: table-cell, so remove the float. Cells are also 100% the height of the container by default. It also doesn't make sense to have 8 cells and try to set each to width: 25%. Perhaps make it a bit clearer what you are trying to achieve here.

ReGGaeBOSS
—
2014-03-10T07:39:59Z —
#13

ralph_m said:

You can't float an element with display: table-cell, so remove the float. Cells are also 100% the height of the container by default. It also doesn't make sense to have 8 cells and try to set each to width: 25%. Perhaps make it a bit clearer what you are trying to achieve here.

Hmm okey i see. Well it is not up to me how many divs with the width 25% that will be in the container, could be three, could be 43, they will be added via CMS. So my solution have to work regardless of how many items there is in the container. I guess maybe one could do some JS solution that creates a new container after 4 items or something?

ralphm
—
2014-03-10T08:38:48Z —
#14

So are you limited to 4 per row?

ReGGaeBOSS
—
2014-03-10T08:40:19Z —
#15

ralph_m said:

So are you limited to 4 per row?

Yes, and below 767px it is 2 ... and below 480px only 1.

ralphm
—
2014-03-10T08:42:39Z —
#16

Will there be a container around each 4, or not?

ReGGaeBOSS
—
2014-03-10T08:44:03Z —
#17

ralph_m said:

Will there be a container around each 4, or not?

No, only if there is some good solution to adding a container to each row. But as it is now...no.

ralphm
—
2014-03-10T08:47:36Z —
#18

Do you need the divs to be visually the same height? By that I mean, will they have a background color or similar? If not, you can set them to display inline-block and give them a width that will create the right number per row. They will stay in an even row, but won't be the same height.

Besides that, you need JS for this.

ReGGaeBOSS
—
2014-03-10T08:55:51Z —
#19

ralph_m said:

Do you need the divs to be visually the same height? By that I mean, will they have a background color or similar? If not, you can set them to display inline-block and give them a width that will create the right number per row. They will stay in an even row, but won't be the same height.

Besides that, you need JS for this.

Hmm yeah all other div except the one with class "match" will be visually the same, regarding looks, height and content. Then we have this "match" -div that will only have a line of text at the bottom and a background-image that have to be the same height as the other divs.