Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
robinbehroozi
15,912 PointsRelative Positioning...
Hey…
So, I've been playing with the relative, absolute and fixed positioning schemes. From what I understand, if a container element has the relative positioning scheme and a child element has an absolute position, the child will be contained within the parent. Ok.
From what I understand, the containing element needs a height so that it doesn't collapse. In the example file I downloaded, I tried giving the containing box named 'content-row' the height of 100%, but it collapsed. However, when I gave it a height of 800 px, it was fine. I also gave it the position relative. So, why won't 100% work…why does the pixel value work and the % value not work.
As a side question, I gave the content-row a height of 100% because it is the containing element of 3 divs…But what I don't understand is that, in the example, the .main-wrapper (the wrapper of the site content) and the .col (all the columns) are also given a height of 100%. Why?
/*.content-row, .main-wrapper, .col{ height:100%;
} */
Any help with these questions would be greatly appreciated. Thanks.
2 Answers
Phuc Tran
6,542 PointsFirst of all, the reason that height: 100% doesn't works because it's a relative height to the container's parent, which is another container with default height set to auto. The browser then can't calculate 100% of auto, so it will do nothing. Your container then still have the default height: auto. By why it still collapsed ?!
Should it contain the children elements? In this case, elements with position: absolute (or fixed as well) are taken out of the normal flow, in other words, there is nothing left for your container to contain, that's why it collapsed.
You can read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/position By "do not leave space for this element", they meant, the element is taken out from the flow. It takes me a while to get along with mozilla documentation, however they're very detailed and helpful and you get used to it.
When you define `height:100% for each element all the way up to the DOM tree, now the browser can calculates you containers's height.
James Finn
7,055 PointsTry defining height:100% for each element all the way up the DOM tree to the root element html. This should achieve your desired result.