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 How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Posted by Bappy Golder
Bappy Golder
13,449 Points

float:right, bringing my nav outside the parent any idea why?

Here is the link to the workspace project:

http://web-kdenwdi8x1.treehouse-app.com/

When I float the orange nav to right it comes outside the parent. Any idea why this is happening?

Luke Lee
Luke Lee
7,577 Points
Luke Lee
Luke Lee
7,577 Points

Sorry, my answer is below.

4 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

In the project the header element is supposed to be floated left.

header {
float: left;
}

So I'm not sure if you lost that at some point or never put it in? You want to add that to your existing header rule.

Normally, a parent element does not contain its' floated children. Floating the parent is one way to force a parent to contain its floated children. This is the technique used in this project.

The clearfix hack that Kevin posted is another way to do it.

There's also overflow: hidden

header {
overflow: hidden;
}

You should be fine with any of these 3 methods.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I should add that if you're going to stick with the project method and float the header then you should also clear the floated header in your #wrapper element.

Add clear: both to your existing #wrapper rule.

#wrapper {
    clear: both;
}
Kevin Kenger
Kevin Kenger
32,834 Points
Kevin Kenger
Kevin Kenger
32,834 Points

Oh yeah dude, Jason nailed it. That honestly went right over my head and I didn't even think about whether the parent element was being floated. +1 Jason!

Kevin Kenger
Kevin Kenger
32,834 Points
Kevin Kenger
Kevin Kenger
32,834 Points

Hey man,

That's actually exactly what a float is supposed to do; "float" the element off of the page, resulting in its parent element collapsing. The way you can fix this is with a clearfix.

.parent_div:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}
Bappy Golder
Bappy Golder
13,449 Points

I've never used the pseudo element :after and content: " "

would you please be able to explain those two? And how did it work for Nick in the video, without these stuff?

Kevin Kenger
Kevin Kenger
32,834 Points
Kevin Kenger
Kevin Kenger
32,834 Points

Yeah sure. The :after (and :before) pseudo element(s) allow you to insert content on a page from CSS, rather than it having to be part of your HTML. The content property is where you specify what content you want to add to your page. You can add a string of text, an image, a counter, and in our case, nothing.

I'm not sure why Nick is able to do that, I'm going to watch the video and see what he does.

Bappy Golder
Bappy Golder
13,449 Points

Cheers man let me know if you find something new from Nicks video. I will play with all these again tomorrow.

Luke Lee
Luke Lee
7,577 Points
Luke Lee
Luke Lee
7,577 Points

This is what float does. you have 2 options:

  1. use display: inline-block; instead of float:left
  2. Add class="clearfix" in parent div. copy&paste below code into your css file.
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}