Not Clearing Floats

This page is an example of what happens if you don't clear the floats on my page template.

The floats can be cleared by using the Clearfix Technique

The trepeat div is the container immediately following the .row container of the page.

Normally, the footer will only be as big as the text it contains plus some padding. Commenting out the trepeat div makes the footer display almost to all of the page.

How the floats are set:

This is the CSS:

.row::after {   content: "";   clear: both;   display: block; }
.left { float: left; padding: 15px; }
.main { float: left; padding: 15px; }

Both the .left and .main are floated left.

Clearing the Floats

A div class is defined in the CSS file that contains a Clearfix.

.row::after { 
  content: "";
  clear: both;
  display: table;
}

The floats here could also be cleared by clearing just left floats (which I actually do on this page)

On this page I wrote a function that toggles the "row" container between .row1 and .row2

function ClearFloats() {
  var x = document.getElementById("toclear");
  if (x.className === "row2") {
    x.className = "row1";
  } else {
    x.className = "row2";
  }
}

The "row" container in rwd_min.css is not used on this page and .row2 is not defined. The "row" container on this page is set to class="row2" id="toclear"

Links

• Pseudo Class - the selection of menu items for a responsive menu
• The W3C Multi-Column Example
• CSS Selectors
• CSS [attribute*=value] Selector)
• Clearfix - where I describe this
• CSS [attribute*=value] Selector

External Sources

• CSS Layout - The position Property - 🔗