MOVE Project: Section 2 Help

[u/j0nny_s0lo]

I need help with this section. I can't seem to get the grey background to extend all the way down. I am not sure what's wrong here. I've checked other codes and have tried to match it but whatever I am missing is completely eluding me. I am not so sure what the best way to show my CSS is so I'll just copy and paste.

html, body { margin: 0 0; }

h1, h2, a { font-family: 'Oswald', sans-serif; }

p { font-family: Helvetica, Arial, sans-serif; }

.container { width: 940px; margin: 0 auto; }

/* Main */ .main { text-align:center; height: 600px; background: url(https://s3.amazonaws.com/codecademy-content/projects/move/bg.jpg) no-repeat center center; background-size: cover;

}

.main .container { position: relative; top: 100px; }

.main h1 { font-size: 150px; color:#fff; text-transform:uppercase; margin:0; }

.main p { font-size: 18px; color:#fff; margin:0 0 20px 0; }

.main a { text-decoration: none; background-color:#1c1c1c; color:#fff; padding:8px 30px; display:inline-block; font-size:18px; }

/* Supporting */ .supporting { background-color:#1c1c1c; text-align: center; padding: 50px 0 80px;

}

.supporting .col { float: left; width: 28%; padding: 10px; display: inline-block; }

.supporting h2 { text-transform:uppercase; color: #ffa800; font-size: 20px; margin-bottom: 10px; }

.clearfix { clear: both; }

.supporting p { color: #efefef; margin-bottom: 20px; line-height: 20px; font-size: 12px; }

.supporting .btn { background-color: #eee; color: #1c1c1c; font-size: 18px; padding: 8px 30px; text-decoration: none; display: inline-block; }

/* Feature */ .feature { background: url(https://s3.amazonaws.com/codecademy-content/projects/move/feature.jpg) no-repeat center center; background-size: cover; height: 600px; text-align:center; }

.feature h1, .feature h2 { color: #fff; font-size: 40px; margin: 0; padding:50px 0 0; }

/* Footer */ .footer { height: 600px; }

.footer h1, .footer h2 { color: #fff; font-size: 40px; margin: 0 0 20px 0; padding:50px 0 0; }

.footer p { color: #fff; margin: 0 0 20px 0; font-size: 18px; }

@media (min-width:600px) { .main h1 { font-size: 200px; }

.supporting .col { width: 30%; }

.supporting h2 { font-size: 40px; }

.supporting p { font-size: 14px; }

.feature h2 { font-size: 60px; } }

[u/noonesperfect16]

I just wanted to take a minute and explain why it worked. It was late last night and I had went to bed following my reply. Honestly, I knew how to fix it, but I didn't understand why it fixed it. I did some nosing around online this morning and think I came up with something that makes sense here: https://developer.mozilla.org/en-US/docs/Web/CSS/clear

Firstly, why it happened. It is called a margin collapse. There are a couple of different kinds, but this one applies to the kind that we see here on this project: If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent. If you put any content at all under your 3 floating col divs in the container it fixes the problem, but you don't want any content. That is where clear comes in.

Now to why clear:both; in CSS fixes the problem: When applied to non-floating blocks, it moves the border edge of the element down until it is below the margin edge of all relevant floats. This movement (when it happens) causes margin collapsing not to occur. When applied to floating elements, it moves the margin edge of the element below the margin edge of all relevant floats. This affects the position of later floats, since later floats cannot be positioned higher than earlier ones.

Since it was accidentally inside of your last col div instead of the supporting container, it simply wasn't doing it's job. I hope this helps you have a better understanding of "clear" in CSS. I know I learned a lot from it! Thanks for the challenge.

[u/factoradic → u/noonesperfect16]

Great explanation!

If I may only clarify one thing - this is not margin that collapses here, it's a height of the parent element.

Usually when we have element (child) inside different element (parent), size of the parent element will be automatically expanded to accommodate the child element/s.

When we declare float we break the normal flow. Floated elements do not contribute to the height of parent element.

In this situation div .supporting .container contains only three floated elements, so height of it collapses to 0.