Page Widget How to - Use clear: both; to create footer

Question

We would like to know how to use clear: both; to create footer.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.column {<!--from   w w  w .j  a  v a 2  s.  c o  m-->
  float: right;
  width: 30%;
  margin: 0 10%;
  -webkit-box-sizing: border=box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.column, .footer {
  border-style: solid;
  border-width: 1px;
}

.footer {
  clear: both;
}
</style>
</head>
<body>
  <div class="column one">ONE</div>
  <div class="column two">TWO</div>
  <div class="footer">Footer</div>
</body>
</html>

The code above is rendered as follows: