Have you had a chance to familiarize yourself at all with the Floating Div Scam? I just ran into live edition of this phenomenon. There is a demo, here, with an explanation built in, but, unfortunately, it is hard to understand. The problem in the live edition is very clear. I was working on the banner part of EMP Admin. The third column was hard to read, with the numbers crowded in with labels on the left side of the white box in the 3rd from the left position in the banner ANOTHER VIEW OF THE SOURCE CODE This link is does not require login to access, it is an html file containing only the page source for the banner with the working and non working wrappers side by side. I left it in the admin directory, so all the style references would work Can you find the difference that makes the background different in the two columns on the right? This is a CSS Essential.
Even though the elements in the page source were different classes, once I opened the Inspector it wasn't that hard to see that the problem lay with the floating divs on the two columns and not the difference in the classes. Here is the CSS for the far right block: and here is the CSS for the block with the problem: In order to keep the col-sm-3 in place, but give the white wrapper its proper dimensions, I was able to put in a few rules that set things right. I don't even know anymore where I picked these up, but I think it was at W3 schools. They are the least awkward ones I could find, and somewhat intuitive to me--setting an overflow and a width to the wrapper to remind it of its real dimensions confines the odd rules to the wrapper itself. As for the difference between the two backgrounds, I don't actually see one, other than that the collapsing wrapper had the misfortune of being floated left next to another element that was also floated left. I admit that the floating div thing is hard for me to wrap my head around, even if I have some ways to fix it now.
I fixed the broken block on my clone of Holly's system as well, because I'm assuming that has been addressed in her version too.
This is absolutely fantastic, the way you have worked through this. This is one of the things you do that never stops amazing me, the way you innovate and use your mind to form you own conclusions and solutions. I want to try this solution on this demo, which I copied to your server. It is adapted from this. Want to take a shot at it? Here is what this demo of the problem looks like (the blue line at the top is a div that wrapped around the four notes. It does not look wrapped to me, it is collapsed, and that is the floaing div scam): One of the things you might encounter applying any changes is the demo is implemented with page parts. The contents of index.php contains nothing that is in the page source. The role of index.php is to call the pageparts in the right order, providing good spots to stop the program (after each call) for isolating problems. The main body of the page is in the file indicated below:
I wanted to add this note to mention the solution I usually use to uncollapse divs like the ones in both demos above. It works like this. First, the problem. This html produces a wrapper with no height, no visible background and a line above the divs it wraps, which the border of the wrapper, the only thing visible in wrapper. The divs inside it act normal, the problem is the wrapper acts as though there is no height in the divs it contains. Code: <div id="wrapper_of_rest_of_divs" class="any_class_with_visible_background_and_border"> <div class="any_class_with_floatleft_different_background_than_wrapper">1. Lorem ipsum squalla et denones</div> <div class="any_class_with_floatleft_different_background_than_wrapper">2. Lorem ipsum squalla et denones</div> <div class="any_class_with_floatleft_different_background_than_wrapper"">3. Lorem ipsum squalla et denones</div> <div class="any_class_with_floatleft_different_background_than_wrapper"">4. Lorem ipsum squalla et denones</div> </div> The fix I use is to add a non floating div after the last floater. I am sure of the minimum requirements but what I know works to use this combo in the div that gets added: The div has a class with the rule of clear: all; The div has a height of 1px. This might not be required, The div contains at least one character, I use nbsp;. This might not be required. Here is what that looks like: Code: <div id="wrapper_of_rest_of_divs" class="any_class_with_visible_background_and_border"> <div class="any_class_with_floatleft_different_background_than_wrapper">1. Lorem ipsum squalla et denones</div> <div class="any_class_with_floatleft_different_background_than_wrapper">2. Lorem ipsum squalla et denones</div> <div class="any_class_with_floatleft_different_background_than_wrapper"">3. Lorem ipsum squalla et denones</div> <div class="any_class_with_floatleft_different_background_than_wrapper"">4. Lorem ipsum squalla et denones</div> <div class="class_with_clearall_min_height_2px"> </div> </div> The reasons I am so incensed by the floating div scam are: It took me about 5 years between when I first was unable to get something to work when I could see no reason for the problem, before I finally was sure this is flaw in the CSS spec. That is a long time to confused about something so basic. I found the solution early on, but all that time wonder what I was missing. Along the way I read a solution by a really smart guy who found a solution published by a different really smart guy. The solution was to use some aspect of CSS that had been a relatively new feature, using :after to place a pseudo element that has the same effect as adding the clear:all that until then had been the answer I always saw given when this question was asked in places like stackoverflow.com. I am offended by this solution, that relies on a pseudo element.The advantage reported was not material but related to not breaking a best practice which broken, they said, by clearall. Ok, whatever, clear all works fine, even though there is no logical way to figure out that it is necessary except for that that it does not work without it. I don't mind that much that 2+7 = 9 only if you add an extra 2 and that extra 2 is needed only for adding 2+7 not 7+2 or any other sum in our system of numbers. If it works it works, I don't have time to worry, but when that turns int0 these other guys are smart because they figured that instead the extra 2 to get 9 out of 2+7 we can use a pseudo-something, well, just hold right there, what is it I don't understand about numbers, because is getting out of hand!! So low and behold, it turns out the reason 2+7 needs an extra 2 to make 9 is that the Bureau of Standards made that rule as a favor to the 99 club, which is a small group of number nerds that like to put 99 next to each other in their magazine articles and if you dig deep enough you find out they can't have 99 without requiring an extra 2 to get 9 out of 2+7. So, being the innovator that I have been since I was a little childrens (yes, all of us were little childrens at one point) I figured, "wouldn't it be easier to drop the requirement for the extra 2 to get 9 from 2+7, and just make a separate rule for the 99, since the 99 has nothing to do with the fact that 2+7 makes 9? Well, that is the arrangement that we have for the collapsed div when it contains floating divs. The reason the smart guys peddle for why we need to keep the collapsing div is that if they want have something like this, then they cannot allow the floating divs to give height to their wrappers, because then instead of what they want they would get this. They say, "changing the CSS spec is too much" but the people saying this are the ones responsible for the CSS spec. So they set themselves up as experts, are openly rude when others make rational objections and justify their position on the phony grounds that the technicalities of changing the spec are too difficult. What they should do is Recognize that CSS is closer to embyonic than mature. Fix flagrant problems now. Is the problem really flagrant? Well,the guy running the prominent site CSSTricks says it is bewildering. Bewildering sounds flagrant to me. If you never had the problem pointed out to you, then you might not have heard of this problem before you found yourself confounded with it the way CSS Tricks-guy and I were when we experienced what he called bewilderment. I know you know the feeling of being stumped by a tech problem under pressure. For me, it is a horrible experience. It's like having to remember that 2+ any number produces a number that is 2 more than the number that it was added to, except 7, which needs and extra 2, and no one told you the exception!!!!!!!!!!!!!!!!!. So you are trying to balance your checkbook, or get the right results on a lab test, and it just keeps being wrong and you need it be right or there will be bad consequences, and then you find the exception, instead it being explained as stupid, you have it explained that you are not understanding addition of numbers,because some assholes think it is more important to not make a new CSS rule to accommodate this, than to remove the bewildering basic.
I just found this authoritative article on the Float Div Scam. Even though this article is part of scam, because it does not point to real culprit, the defective CSS spec, it is worth reading on a lot of grounds. One thing that strikes me, the solution I use for the FDS is not included in the long list of solutions that are usable. My solution is to add a div to the end of the container div, with this style: .clearFloat{ width:100%; clear:both; height:1px; } This solution is similar to the last one given in the article. The article criticizes that solution on the following grounds. My comments are italicized. the main reason: you're putting presentation in your markup. This makes reusing the markup more difficult if you don't want the <br> style in another context where the same markup is used. CSS should be used to style the same markup differently in different contexts. When HTML was invented, the idea was the HTML would provide presentation specifications to content, thus separating HTML from content. So what this criticism is saying is that presentation is included in the presentation. That said, I don't the <br> either, because it puts a big space into the page. Using a div instead with the style I noted above inserts an extra pixel of space across the screen. Now that I read this article on clearfix, I can see that effect can be avoided. doesn't add any semantic value to your markup, I don't give a fuck about this one. makes your code look unprofessional, I think it is unprofessional not to point out that all this discussion is in response to a flaw in the CSS spec, and these machinations for an elegant solution can never rise above the inelegance of HACK. in the future when other clearfix solutions are available you won't have to go back and remove all the <br> tags which are littered around in your markup. Like I said, the <br /> solution sucks.
I think the link to the article is missing here. I'm always curious to read these though, because I have yet to see a fix that is elegant and that makes sense. Still, I need to understand the floating div problem better before I can take a position on it. (I need to understand it to defend my conclusions.) And I just noticed there is a floating div demo here that I have not explored yet!
I don't know if I can find that article. It might come to me. Nobody else calls it the Floating Div Scam. I am glad you are forming your own conclusions. Hard to pick what is best about working with you, but that one is on the short list.
Here is the authoritative article. http://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use bonus: I clicked through to one of the articles it links to and posted this comment: So here we are again, putting gold leaf on the turd that is the Floating Div Scam. The scam is all this time wasted on coping with a problem instead of focusing on solving the problem at its root. The root of this problem the CSS Specification is inadequate on this subject. Our attention should be on correcting the spec and then none of us will need to spend another moment on this stupid issue.
