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
Evelyn Barney
410 PointsFloats & Clearfixes and why can't I understand them?
I've no idea why floats and clearfixes are rocket surgery to me, they just are. When I get them to work, I'm never sure why.
SO! the two methods I understand as 'semantical' (no extra HTML) are:
.clearfix:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; }
.clearfix {display: inline-block;}
/* Hides from IE5/Mac */
- html .clearfix {height: 1px;} .clearfix {display: block;} /* End hide from IE5/Mac */ And it's 'cute' version:
.cf:before, .cf:after { content: ""; display: table; } .cf:after { clear: both; } .cf { zoom: 1; }
Then there is the whole inner/outer overflow auto thing. I'm convinced it hates me.
HERE is a the photoshop image I'm trying to recreate, more or less: http://emendationslist.com/rslai/RSL-admin-index-delivery.png and HERE is the mess I have so far: http://emendationslist.com/rslai/adindex2.html EVERY TIME I try to reduce the size of the blue head on the second column, the whole thing breaks out and hides under the first column, Under in both the Y and Z sense. And no, it's no that there is so much text in the topper, it's that way even without ANY text.
I tried something similar on a page I've been using just to communicate with the client as we go (it's no supposed to be public consumption pretty) - if you scroll down about 1/2 way you will see 3 column squished to the left. http://emendationslist.com/jerequest/jerelements.html so why has none of that worked on the page above? (I've written it a few ways before calling for help.) How do i fix this? and how do i get my head around floats and clears? I've been here: http://css-discuss.incutio.com/wiki/Clearing_Space among ohter sites. It's SO FRUSTRATING! Thanks for reading,
Ev
7 Answers
James Barnett
39,199 Points> I've no idea why floats and clearfixes are rocket surgery to me, they just are.
Check out learnlayout.com that's probably the best explanation of floats I've seen.
Looks like you were over thinking this. I re-arranged your HTML a little bit, I moved uTop & aTop inside .users & .accounts respectively. I also moved .help inside .contentArea. . After those changes you only need to float contentArea.
I made you a codepen http://codepen.io/jamesbarnett/pen/GqECh
You can compare (or use diff if that's your thing) the HTML in the 2 versions to see the changes.
These are the only CSS changes I made:
h1 { padding-bottom: 20px; }
.contentArea {
float: left;
width: 100%;
}
.uTop { width: 100%; }
body { background: #fff; }
Kevin Korte
28,149 PointsPart of your apparent problem is you have content and titles all in separate divs. It'll be easier to control them if you had a parent div that was the one that was floated, and than the title and body of each of the three boxes were the width of it's container, wrapper, or parent div, whatever you want to call it.
I created this a while back for another question here, but it does deal with floats and clearfixes. Play with the code, edit it, delete something, you can't really harm it. See if you can't figure out how it all works.
http://codepen.io/kevink/pen/wpcdC
One more piece of advice, practice NOT building websites in just one pass through. Much like a 3D modeling program renders an image with multiple passes. First build your HTML structure, get your layout correct, than start adding your design like CSS like colors, highlights, pseudo classes, etc. Each on of these is a separate pass through the site.
Kevin Korte
28,149 PointsThe clearfix should be applied to the parent element that contains only floated children. You can have more than one container like div with a clearfix on it.
Go back and look at my Codepen. In my blog mock up, I have a div with the class of container and clearfix, inside of another div with the class of container and clearfix. Delete one of those classes and see what happens. You can nest clearfixed containers inside clearfix containers, but it's always not the most symantic way to do it.
I'll admit my example isn't the most symantic, but it does work as an example.
Evelyn Barney
410 PointsOkay - let me see if i understand this - are you saying that for each column i should have THREE divs - not two? (one that wraps around the one i have?) I really appreciate you sharing that Code Pen Kevin - THANKS! As for your last piece of advice - that sounds pretty scary. i started out as a design and content person, so they idea of building a page when i can't see how it LOOKS as i go sounds like flying blind - but i may try it sometime.
Kevin Korte
28,149 PointsNot quite,
For each column, I would have a wrapper div. This div would be the div you would apply your float to, in addition, you would control the width of each column with this wrapper div. It's a structural element.
Nested inside of that wrapper div, you could have a title div, which would span the width of it's wrapper div by setting it's css property to width: 100%;. You could also do your title background, paddings, margins, etc for the title. And than under that div, but still nested in the wrapper div, you would have your content. Which for all 3 of these columns appears to be a list of links. This would also get a width of 100%, because it will only span to be the width of it's parent div, which is the wrapper div we started with, and we control the actual width through that wrapper div.
Than, you might even need to put these three wrapper divs that contain the columns, in yet another container or wrapper div to center or position the columns as needed. This container div that contained the three columns and their wrapper divs would need the clearfix, since the container div would only contain floated nested children (the wrapper divs we floated left earlier), it will collapse on itself without a clearfix.
Does that help?
Evelyn Barney
410 PointsYes, which was pretty much how i understood it, just guess i didn't say it clearly.
thanks again.
Evelyn Barney
410 Pointshope you're still around Kevin, what is this stuff about how a clearfix has to be AFTER all floats? Does that mean i can't have more than one container div with a clearfix per page?
Evelyn Barney
410 PointsThank you so much James - i think i may be able to beat this into submission now.