That was a great demonstration. I understand the floating div problem much better now. (And I picked the 'right' answer d, the first time. ) If the floating div won't allow the boxes to be arranged side by side inside the blue box, is there a workaround for that? I guess I will be learning about that soon. Meanwhile, the disappearing blue box does seem like dopey way for it to respond to a different arrangement of boxes inside it.
And I like the 'Hot' category right here at the top. The new posts sidebar fills up quickly, and obscures topics of immediate urgency. This is a good way to keep current topics from getting buried.
I just made this page, to show the fix and what I think about it. You can use the inspector on this and the first demo
I had my first encounter with floats at Code School, and am awaiting the moderator's approval of my question. My question went something like this, before it disappeared into moderation: How is this the right answer??? Especially when this: Looks a lot nicer: I didn't lose points for my better looking answer, especially once I filled in the one they were looking for, but I'm just confused about why the other answer was the only acceptable way to code this. Are we supposed to float left just because it says so? (I was much nicer about my question, of course, because I'm more likely to get an answer that way!) Don't get me wrong, I think Code School is pretty great because it gives me a chance to write some code and try it out in bits and pieces as I learn. And, of course, badges. But once it a while it would be great to interact with a real person on questions like this.
So the dotted line border was part of the page you were working, following their instructions, and then following their instructions broke the border? Removing the float from the left column is going to have consequences beyond keeping the border working. I am not sure what they will be, but I'd check the page at narrower widths to see what it does. To keep the float and the border, you can add a non-floating div just before the div with the border closes. <div class="clearFloat"> </div> Add this to css: .clearFloat{ clear:both; width:100%; height:1px; //not sure if 0 height always works } This is an authoritative source on the matter The How and Why of Clearing Floats | CSS-Tricks Hummm, that article contains a link to this article, which contains a justification for the Floating Div Scam. The justification is provided in the section entitled, The Great Collapse. I emailed a rebuttal to the author. The rebuttal is included within the black box at this link, marked Block Element 3.
Well, I closing this as an active topic. At the CSS tricks site, I found what I was looking for in terms of explanation. I am sure you now are forewarned to the mysteries of the floating div.
Floats sure are tricky. It's worth the effort though. I like the end results a lot. No word from Code School moderation yet about my comment.
There is one more link into an article at CSS tricks on this topic. It provided closure for me on this matter that has bothered me for years. The closure came from recognizing in more depth the perspective that keeps weird behavior alive. The other blog entries on that site are closed to comment but this one was open. I posted a brief comment and that is what led me to say this topic is now resolved for me. My more important objective was to alert you to the confusing behavior of containers with only floating elements. We live with a justice system that executes innocent people and acquits OJ. People accept that, why should people not accept a confusing spec for CSS? We need to explain to people in our corner of the world, if it isn't like Jupiter, it means it is not right, or not finished. That is not what we are here for. If Mr. Css Tricks were relating to that principle, I think he might change his position of acceptance of the bewildering and seek something finer. The work he produces is awfully fine, so I had hoped for a higher vision from him. Speaking of Jupiter, your touch on Holly's site is the closest we get to Jupiter. It grabs people and holds their attention, because the quality of your styling is delivered through many details and levels, all consistent and complimentary of one another, but also delivering complexity. That is what Jupiter does, isn't it!?
So, rather than the floating image making the div too large to enclose the paragraph properly, it is preferable to have the whole thing collapse? I'm not buying that either. I understand your search for some kind of rationale behind instituting such behavior though, and that seems a weak explanation. The whole thing intrigued me, and as I worked through the various tools for placing elements where I want them on a web page, I made a little demo of my own. (Link) ( If you like the work I did on Holly's site I think you'll enjoy this too. )
