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 trialBappy Golder
13,449 Pointsfloat: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?
4 Answers
Jason Anello
Courses Plus Student 94,610 PointsIn 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
Courses Plus Student 94,610 PointsI 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
32,834 PointsOh 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
32,834 PointsHey 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
13,449 PointsI'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
32,834 PointsYeah 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
13,449 PointsCheers man let me know if you find something new from Nicks video. I will play with all these again tomorrow.
Luke Lee
7,577 PointsThis is what float does. you have 2 options:
- use display: inline-block; instead of float:left
- 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%;
}
Luke Lee
7,577 PointsLuke Lee
7,577 PointsSorry, my answer is below.