The horizontal menu under the title bar of my pages consists of two
floating <div> blocks. On the left, there is only the one
Home link while the block on the right contains the other links:
About, Programming and so on. The vertical
alignment of the next element on the page, whether a search box, a date, or a
paragraph as the case may be, was tricky and my solution was the worst
possible. It was time to revisit this issue. Once again, many have already
found good solutions.
Table of Contents
- The Problem
- The W3C <br... Fix
- The
clearfixSolution - Lessons Learned Concerning the Clearfix CSS Hack
- Jeff Starr, Feb. 5, 2008, updated Jan. 15, 2017.
- Clearing Floats: Why is it Necessary Even in “Modern” Browsers?
- Louis Lazaris, Oct. 23, 2012.
- Utiliser la class clearfix
- Renaud Anney, Aug. 16, 2012
- How To Clear Floats Without Structural Markup
- Big John, Mai 14, 2004, updated July 2, 2008
- Simple Clearing of Floats
- Alex Walker, Feb 26, 2005
- It Was Anticipated:
overflow - The New Modern
clearfix - Conclusion
Here is a typical HTML layout problem that is often encountered. To start, there is a container block of type <div>. who will occupy 90% of the total width and that will be aligned in the centre. Between the tags defining this container there is a paragraph with a date also centre aligned and two other <div> zones containing text, one that floats to the left and the other on the right. Finally, the container area is followed by a paragraph displaying a second date aligned with the right margin.
Where will the second date be situated? Probably not where one would have desired as can be seen below.
date: 2018-02-03
date: 2018-02-04
Because they are floating areas, the two text boxes are not contained graphically in the parent container area even if they are between the <div> and </div> tags of the parent <div> block. The green outline shows that the vertical size of the parent block only takes into account the first date. So the browser places the second date under this zone, ensuring that its text does not encroach on the floating zones. By contrast, the frame around the second paragraph that occupies the entire width tramples over the floating areas.
I was trying to fix the problem by setting the vertical size of the parent container area. This method is frankly bad. To see that reduce the horizontal size of the browser window so that the two floating text boxes occupy an increasing vertical space until it exceed the fixed vertical size of the container area.
The World Wide Web Consortium (W3C) has
apparently provided a fix, a <br> tag with a clear:both
style. It is placed before the paragraph containing the second date.
At least, the second date is now below the floating text boxes no matter what their height might become as the width of the browser window is modified.
date: 2018-02-03
date: 2018-02-04
This solution is not perfect. For example, the border drawn around the initial container does not encompass the two floating text areas. In addition, we added an element structuring the visual presentation to HTML text. This is something to avoid especially since the introduction CSS styles.
We can replace <br style="clear:both"> with a <div> that
has the same clear attribute and occupies the full width of its container, but has no
vertical dimension.
Note that the block contains a non-breaking space but that is
printed with a 0 height font. This is a trick to make sure all web browsers
"print" the item. This is not better to the solution proposed by the
W3C, but it makes it possible to better understand the many variants of
clearfix solution already available for a number of years.
Among these, I used that of Jeff Starr proposed in 2005 and revised in 2017
since it was the most recent of those that I had found.
The operating principle is as follows. The <div> block containing the
floating zones will be of class clearfix. This class has a pseudo
after element that inserts its content after the <div> has
been displayed. And what it inserts is basically the zero height space
as in the zero vertical dimension <div> shown above.
As can be seen, the clearfix class <div> adjusts
its height to include the two floating zones.
date: 2018-02-03
date: 2018-02-04
References:
Reading the last two references mentioned above,
it seems that a simpler solution was pretty much always available.
Just add overflow:auto in the style of the parent
<div> container.
It works and it's simple. On the other hand, it's a bit difficult to
understand since the role of the overflow attribute is to manage
the use of scroll bars when the contents of a block exceeds its size. It's
not clear to me why this is the block size is adjusted. At the same time, it
is not clear a scroll bar should be added to see the floating text areas
which are already visible.
date: 2018-02-06
date: 2018-02-04
The w3schools warns that
... overflow:auto clearfix works well as long as you are able to keep control of your margins and padding (else you might see scrollbars) ».in a page entitled CSS Layout - float and clear. There is a longer discussion of the problems that can arise with this approach in Clearing floats by Peter-Paul Koch (March 2005).
He suggests the following CSS element.
I have a problem understanding overflow:auto,
overflow:hidden makes even less sense to me if at all. But it
does work. The width attribute could be replaced with
a height attribute often set to 1px
ou 1%. Also it is not necessary to set the width to 100%,
it is set to 90% in the example I provide.
The solution propounded by w3schools itself is to use the following pseudo element..
Since it is not necessary to include any attribute in the clearfix
style, it does not need to be defined; the pseudo-element is enough. However,
we will continue to use class="clearfix" in the HTML file.
Note the double colon to indicate the pseudo-element. It seems like a recent change in syntax.
I checked all these solutions using test.html and they all work for the small alignment problem that I presented here, which is what I use on this site.
To be more specific, I looked at the page with versions recent browsers on operating systems the more common.
| Browser | System |
|---|---|
| Firefox | Windows 10, Ubuntu 17.1, Android 6 |
| Chromium | Ubuntu 17.1 |
| Chrome | Android 6 |
| Edge | Windows 10 |
| Internet Explorer | Windows 10 |
| Safari | OSX, IOS |
Of course, there are other browsers and other operating systems. There are also older versions of browsers; the oldest did not fully comply with W3C standards. However, is this really necessary to make sure compatibility with Firefox 3.5? Especially on a site like this?
I decided to use the new modern clearfix from
w3schools because, in principle, all
recommendations found on that site have been verified with several
browsers some of which I do not have.
Whatever solution is chosen, it seems to me preferable to proceed
using a style that could be called clearfix or something else.
I read somewhere that there is a CSS attribute on its way
to solve this problem explicitly. If we have dispersed
overflow:xxxx in several other styles, it could be
more difficult to move to the new attribute in due time.