CSS Post Cleanup

Question

I make more efforts to separate my html structure from the presentation, but sometimes when I look at the complexity of hacks or workarounds to get things to work in a cross browser, I am amazed at the enormous collective waste of productive hours that are put into it.

As I understand it, plugins have never been created to create layouts, but because many layouts need a footer, because they are often used. To clear the floats, you can add an empty div that clears both sides (div class = "clear"). It is simple and cross-browser works, but it adds “non-semantic” html, and does not solve the presentation problem in CSS.

I understand this, but after looking at all the solutions with their advantages and disadvantages, it seems to make sense to go with an empty div (predictable behavior in browsers) rather than creating separate stylesheets, including various css hacks and workarounds, etc. . which should also change as CSS evolves.

Is it ok to do this while you understand what you are doing and why you are doing it? Or is it better to find CSS workarounds, hacks, and a separate structure from the presentation at all costs, even if the provided CSS presentation tools are not developed to the point where they can deal with such basic layout problems?

Answer 1

Your right approach. Rules are created for those who do not understand them. If you know all the pros and contrasts, make your own call.

In this case, you are especially justified. CSS decided to ignore the general desire to separate content A from content B horizontally, so you need to choose a hack that you don't like. I compare the three solutions already presented here.

• Your decision is bad because it changed the contents of the document by inserting the C element, whose sole purpose is to visually separate between A and B. The content should not serve the purpose of the layout.
• Karpies solution is a little worse (in my book) because it does the same thing slowly. The pseudo-element ": after" was not intended for this. However, it has the great advantage of never modifying HTML.
• The PorneLs solution provides the desired separation between A and B by a radical change in the properties of A. This change will not only separate A from B, but also separate A from the previous contents, change the width path of A, and so on. Of course, sometimes this is completely normal, but you should be aware of these unexpected side effects.

The choice is ours.

Answer 2

Clearfix is ​​no longer required, and the popular version of hacking is unnecessarily complex and complex.

You can get the cleanup effect by applying overflow:hidden to the container. If the container does not have a fixed height, it will stretch to the size of the content. This is not a hack, but the specified behavior that works in all browsers.

And when you really need overflow:visible , you can clear without an extra element in the markup:

  .container::after { content:""; /* not "."! */ display:block; clear:both; } 

and that is completely standard CSS 2.1. In versions of IE that do not support CSS 2.1, hasLayout has the desired effect:

  .container { zoom:1; } 

Answer 3

I definitely disagree with the idea of ​​using extra markup just to clear the div.

I favor the 'group' approach - putting class="group" in the parent div with the following CSS:

 /* Clear groups of floats by putting class="group" on their parent */ .group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 

And in the IE-specific style sheet for IE6 / 7:

 /* IE7 */ .group { min-height: 1px; } /* IE6 */ * html .group { height: 1%; } 

This has been described in detail in CSS Mastery, Andy Budd. This stretches the semantics a bit, but it makes sense - you are grouping floating divs, which obviously have something to do with each other.

edit: I would not consider this huge hack or workaround - this method has existed for many years in various incarnations (usually known as the clearfix method), and I do not see it at any time in the near future.