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 Matt Van Dyck
Matt Van Dyck
2,033 Points

Why is my container not holding my elements?

Hi there. I am building my website here http://blueprint.pixelblvd.com/#content and in this specific section where it says 'we are blueprint' and theres a video, I have it wrapped in <section> tags and then in a container. However, if I don't specify the height of the section tag, that area of the page looks funky. Right now, I have it set to 78% height, because that is what fits my labtop, but if someone has a bigger (or smaller) screen size than me, this will look weird. Why is the section tag not automatically getting the height and putting the white background behind it?

Thank you!!

2 Answers

Riley Hilliard
Riley Hilliard
Courses Plus Student 17,771 Points

You are floating both inner elements, one left, and one right. When doing this, you need to add a 'clearfix' css rule to the container div to fix the alignment issue. Your theme there does not come with a .clearfix class, so you are going to need to add one to your css file. Add this code to your css file:

.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}
.clearfix:after {
  clear: both;
}

and then add a class of 'clearfix' to that section like so:

<section id="content" class="clearfix">
... stuff
</secton>
Matt Van Dyck
Matt Van Dyck
2,033 Points
Matt Van Dyck
Matt Van Dyck
2,033 Points

Thanks so much :)