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 Andrew Stelmach
Andrew Stelmach
12,583 Points

Anyone fancy a good hack? Help with a float PLEASE!

http://codepen.io/andrew_stelmach/pen/AICHk

This is a responsive setup using media query breakpoints. Excuse the crazy colours - I set these while I was trying to solve a problem (so I could see where the different elements were, margins, padding etc).

The thing is, I HAVE sorted it. But this was after a lot of frustration. It's been so long I can't remember exactly where the problem started. I did have it working fine, and somewhere along the line I bollocks'd it up and I've had to spend a long time fixing it.

To keep a long story short:

At the widest media query I've floated the .main-nav right. The strange thing was, when I floated it right, it sat just underneath the .main-header, and I've no idea why.

And I really want to know why.

I've 'solved' the problem by giving the .main-nav negative top margin. But I want to know if there's a more elegant solution. I'm sure the .main-nav 'should' sit inside the .main-header when floated right. But it doesn't!

To see what I mean, omit the line that gives the .main-nav negative top margin.

I'm sure it's something to do with a margin collapse. Or not. I'm confused. Please help! I've searched for ages on the internet but haven't quite found the answer I'm looking for.

PS If the navbar appears to be invisible, just resize your browser narrow and then wide again. Must be something to do with the media queries affecting codepen.

6 Answers

S Alexander
S Alexander
18,962 Points
S Alexander
S Alexander
18,962 Points

Yes. The codepen I sent back is mine -- it's got the clearfix.

Here are the changes I made:

HTML

```<div class="main-header cf">

##CSS

/* Start of "Micro clearfix" */

    .cf { zoom: 1; }
    .cf:before,
    .cf:after { content: ""; display: table; }
    .cf:after { clear: both; }

/* End of "Micro clearfix" */

/* Adjust .main-logo and .main-nav after adding clearfix*/

.main-logo { display:inline; float: left; }

.main-nav { display:inline; float:right; }

Hope that helps.
Andrew Stelmach
Andrew Stelmach
12,583 Points

That's great, thanks. But what would I do then to adjust the position of the nav, to set it level with the bottom of the logo? Just add top margin?

Andrew Stelmach
Andrew Stelmach
12,583 Points

I tried (what I think is) the same clearfix in a different (less efficient) format, but it doesn't have the same effect:

.main-header { zoom:1; }

.main-header:before { content:""; display:table; }

.main-header:after { content:""; display:table; clear:both;

Don Shipley
Don Shipley
19,488 Points
Don Shipley
Don Shipley
19,488 Points

@media (min-width: 915px) .main-nav { float:right; margin-top:-80px; }

Try margin-top 0;

Andrew Stelmach
Andrew Stelmach
12,583 Points

Doesn't work

S Alexander
S Alexander
18,962 Points
S Alexander
S Alexander
18,962 Points

Hey, Andrew.

I see what happens when I take out the negative top margin.

Not sure what your ultimate goal is, but you can to delete the negative top margin if you add a clearfix. codepen

Andrew Stelmach
Andrew Stelmach
12,583 Points

Could you demonstrate? Might be better to write the code here, rather than alter the codepen, because if someone else alters the codepen afterwards, it automatically saves the changes (so your changes will be lost).

Btw, I tried adding a clearfix to the .main-nav. Didn't do anything.

Have you actually tried what you say on the codepen I provided?

Don Shipley
Don Shipley
19,488 Points
Don Shipley
Don Shipley
19,488 Points

Hello Andrew, You have what S Alexander is saying incorrectly. Just create the class cf inside your css file and add the to your main-header <div class="main-header cf">

S Alexander
S Alexander
18,962 Points
S Alexander
S Alexander
18,962 Points

Cool.

Sure, you could add top margin.

Since (1 most people look at the top & left of a page first, (2 nav menus help people feel oriented, and (3 nav menus usually aren't displayed like objects contained within frames, but frames, you might consider leaving it there.

Any luck with the clearfix by now?

Andrew Stelmach
Andrew Stelmach
12,583 Points

Yes, thanks. Your clearfix worked. However, I've been tinkering and it looks like the only part of the clearfix that's needed is the pseudo element after the main header. So:

@media (min-width: 915px) {

.main-logo { display:inline-block; }

.main-nav { float:right; }

/* .main-header { zoom:1; } */

/* .main-header:before { content:""; display:table; } */

.main-header:after { content:""; display:table; clear:both;}

.main-nav { margin-top: -80px; } }

This clearfix places the nav inside the header, and then I just apply some negative top margin.

I'm starting to lose track of the different solutions, but the main thing I've so far taken away from this is that the pseudo element has to be placed after the container (.main-header), NOT the nav bar itself. I can kind of visualise why this makes sense.

However, what I'm asking for is explanation as to why any of this matters. Maybe it doesn't - maybe my original solution was fine. After all, it worked.

So, I have two remaining burning questions:

  1. What solution is best and why? Any advantages/disadvantages you can think of? Perhaps possible repercussions when developing other areas of the page?

  2. Why did the initial float put the .main-nav outside of its container in the first place? (In demonstrations I've seen in the videos the nav floated in quite a nice spot without any adjustment needed)

I don't just want solutions here, I want to REALLY understand what's going on. That will be great for my development.

Any help much appreciated.

S Alexander
S Alexander
18,962 Points
S Alexander
S Alexander
18,962 Points

Hey, Andrew. I'm moving house, and don't know when I'll be able to send an answer to these questions. If someone else does first, great. In the mean time, you might review Guil's videos on floats & clears, and on layout.

I'm working from memory of your css file, but I suspect that the <=100px difference btw. Max width (one of your outermost elements like body or wrapper is max-width:1000) & the big-screen media query (if memory serves, something like 960px) may have something to do with it.

Hope that gives you somewhere to start.

Cheers! A