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

CSS

Posted by Alejandro Jerez
Alejandro Jerez
10,987 Points

Practice website help.

Hi,

I tried coding this website for practice and could almost successfully finish it. I would appreciate if you could help me out with the following:

  1. I couldn't successfully float the .col DIV's inside the supporting class without having either the supporting DIV or the container collapse (i don't know which one is the one collapsing) even though i have a clearfix.

  2. I believe the clearfix is being used in the wrong way, or isn't it?

  3. I couldn't completely center the 3 .col DIV's in the supporting section.

  4. The text in the .main DIV wont change its font size, why is that?

  5. For some reason there is a white space on the top of the page. I am guessing the border collapsed or something collapsed. Also every section has a collapsed top and/or bottom border. How do I fix this?

Here is the pen with the code: http://codepen.io/alejoj/pen/KpYKdz

Here is the original website: https://s3.amazonaws.com/codecademy-content/projects/move/index.html

Thanks for your help!

1 Answer

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

Edit: I have forked OP's original pen in case it gets edited and in the chance that any readers would like to follow along or to run the experiments in my follow-up comment. -- Codepen fork

Hi Alejandro Jerez,

1 & 3: I didn't see an issue with the floats - they were working for me. However, for the centering of the columns, the width will need to be set. width: 30%; worked nicely for me, although this may require a media query for mobile with the width set to something smaller. ( .supporting { text-align: center; } is helping with the centering already as well ).

1 & 2: .supporting .container is collapsing because your .clearfix is missing some key parts. Keep the clear: both; and then add the following:

  1. Whenever we use a pseudo-element such as ::before or ::after the first thing we need to do is set the content property. An empty string works for when we do not have any content to place -- content: "";.
  2. Set to display: block; in order to prevent the collapse and give the div height. We don't need to set a height, except for older IE.

We are able to get rid of the excess div where you have declared the .clearfix and, instead, apply it to .supporting .container since it is the parent container for the floats.

4: This is a simple typo in the CSS. Change .main h2 to .main h1.

5: This is happening because there are vertical margins applied to other elements which can result in a collapsed margin. In order to get rid of the spacing add overflow: auto; to the different section containers:

.head,
.supporting,
.premium,
.footer {
    overflow: auto;
}

Great questions! Good luck. :smile:

Alejandro Jerez
Alejandro Jerez
10,987 Points

Thanks for your help!

Setting overflow auto solved all my border collapsing problems. The width at 30% centered my DIV's perfectly and in the end the clearfix wasn't needed

Sean T. Unwin
Sean T. Unwin
28,690 Points

You're welcome. :)

I want to say a few things about the clearfix comment you made.

It's not that the clearfix wasn't needed, it's that .supporting .container isn't needed because it's not really doing anything to assist the layout and also that .supporting has a min-height set.

To test this, you could do the following (provided the clearfix class is not being used within .supporting anywhere):

.supporting {
  border: 1px dashed pink;
}
.supporting .container {
    border: 1px dashed lightblue;
}

You will notice that .supporting .container has no height at all. This is not affecting the view because .suppporting has a defined height as I mentioned above.

If you want to test even further, remove the .supporting .container div from the HTML and remove min-height: 150px; and also overflow: auto; from .supporting and see what happens.

Finally, add the clearfix class to .supporting, providing you have removed the .supporting .container div. You will now see that everything is back to being displayed as intended.

To conclude, the clearfix ( or overflow: auto; ) is needed on the container of floated elements where a static height on the container is not declared.

I say this because I want each of us to be the best designer we can be and in order for that to happen we should try to understand some of the quirkier issues of CSS, as well as why certain 'hacks' ( or tricks ) were created out of necessity.