The Clearfix Hack
I came across the Clearfix "hack" when I was looking at floating images. The is also a connection to Pseudo Elements and Pseudo Classes.
On closer inspection of the example on the W3C pages it looks like the Pseudo Element that I was trying to work out from my css file rwd.css - the "row" class looks very like the "clearfix hack"
What educative.io/edpresso say:
A clearfix is a way for an element to clear its child elements automatically without any additional markup. The clearfix property is generally used in float layouts where elements are floated to be stacked horizontally.
In my example below I have taken the code from W3C and added my own text and an explaination to some of the css.
The W3C example:
In this example, the image is taller than the element containing it, and it is floated, so it overflows outside of its container:
Without Clearfix
I even added a multiple class for the div with the green border.
div.test
Add the clearfix hack to the containing element, to fix this problem:
With Clearfix
A css clearfix class CSS declaration is shown below:
.clearfix::after {
content: "";
clear: both;
display: table;
}
What seems to be happening here is that the .clearfix overflow: auto; has been given explicit attributes.
I still don't know what the display: table; is and how it differs from the display: block;
The note that I have in rwd.css that the ::after pseudo-class matches the last child of the class and then allows you to add some cosmetics makes a ltlle more sense now.
The bottom line is that the layout works the way that I want it to. The image handling page showed me that the "title repeat" (the div with id="trepeat) needs to be after the "row" container for the text to centre with the footer.
CSS content Property
Not to be confused with display: contents.
Not clearing floats
Here I show the "containers" used in my new layout's CSS file red_min.css:
.row::after { content: ""; clear: both; display: block; }
.left { float: left; padding: 15px; }
.main { float: left; padding: 15px; }