CSS Bug/Problem!

Hey Cameron,

You're right about having to set the parent's element to 100% in order to get the element itself to be 100%. But it looks like you didn't do that for everything you had to. Since the divs that you're targeting are in the the div with the gallery class, you have to add a height: 100%; rule to your gallery selector as well.

Also if you want them to actually span the height of the page, you'll have to remove the margin: 10% 10%; from the gallery selector, because that's pushing your divs inside of it away from the edges of the viewport.

I hope that helps with what you're trying to do!

Haha yeah that's weird! OK it looks like it has something to do with your .gallery. So you've got divs one, two, and three in one gallery div and four, five, and six in another. If I remove the second gallery div so all six are in the same div, the problem goes away. But is there any reason you had it like that? I don't want you to have to sacrifice something because of it. It's just styling those two exactly the same way since they've got the same class and other than their content are more or less identical, and I'm assuming that's why they're overlapping.

OK I came up with something that I think could work. It's a little sketchy and could use some tweaking as far as heights and percentages go, but I think it gets the job done. The reason that they're overlapping is because the height of .gallery is 100%. So when you scroll down the page (past 100%), the next gallery div starts. So I made the gallery 300% and each div inside of it 33.333% (roughly 1/3 of 100%). That way the next .gallery div starts after divs one, two, and three.

I just forked your pen here. Let me know if this could work.

Hey Kevin. thats for the response!

I changed the rules you mentioned above you while the divs height are now equalling 100% which is great, some weird things are starting to happen haha. The divs are overlapping themselves and I haven't been able to work out why this is the case. I've updated the code pen if you wanted to check it out.

I thought that might have something to do with it. The aim with this code is to create three divs (or possibly have an ul with 3 li items) that are placed one under the other. Each div was to have the rule height: 100% so that it would span the height of the viewport. Then a margin of 10% applied to css .gallery which would act as the parent container so effectively the margin gets applied to the three divs are a whole and not individually. The idea being that I could style it in a way that I would be able to copy and paste the gallery div anywhere in the mark up and it still would look the same. I hope that makes sense haha.

Haha I was actually thinking about doing something with the 300%, although I still had it at 100% height instead of the 33%. That works perfect man, and now I've added that 10% margin to the .gallery which has now separated all three galleries.

http://codepen.io/cambourke/pen/Lbfzo

Cheers for all the help man, really appreciate it!