Left/Right Align With Float

Another method of aligning elements is to use the float property:

HTML file: Displayed by browser:
<style> body {
    margin: 0;
    padding: 0;
}
.right {
    float: right;
    width: 300px;
    background-color: #b0e0e6;
    padding: 10px;
    background-color: #b0e0e6;
}
</style>
<body>
  <div class="right">
    <p><b>Note: </b>When aligning using the float property, always include the !DOCTYPE declaration! If missing, it can produce strange results in IE browsers.</p>
  </div>
</body>

Note: When aligning using the float property, always include the !DOCTYPE declaration! If missing, it can produce strange results in IE browsers.

Good habit There is a problem with IE8 and earlier, when using float. If the !DOCTYPE declaration is missing, IE8 and earlier versions will add a 17px margin on the right side. This seems to be space reserved for a scrollbar. So, always set the !DOCTYPE declaration when using the float property.
Back button Table of Contents Next button