Interface Experiences: Float Right CSS!

Introduction

There is more to styles in web development than .class and #id. The structure of your HTML is also important. This post will describe a recent problem a colleague had with his UI and how his issue was resolved. Basic HTML and CSS experience is assumed.

Background

Below is a basic example of what, I’ll call him “Joe”, needed to accomplish:

Price	20
Tax	1.34
Total	21.34

This is a disclaimer regarding purchases,
tax, and the like…

 

 

 

 

 

As you can see, there is simply a table on the left and a disclaimer on the right. This is what Joe was hoping for. Instead, he got this:

Price	20
Tax	1.34
Total	21.34

 

 

 

 

 

This is a disclaimer regarding purchases,
tax, and the like…

Above shows the table on the left and the disclaimer on the right but, the disclaimer is below the table. The intent is for the table and the disclaimer to be inline. How can this be fixed? Let us first look at Joe’s first version of his HTML and CSS. Below will describe Joe’s first attempt at developing the user interface.

Attempt #1 – Fail

When Joe first wrote his styling and HTML, he was thinking of the left-to-right (LTR) reading direction which is only natural. The issue with this is there is nothing natural about this page. Below is the HTML and CSS used:

<style type="text/css">
.disclaimer
{
   float: right;
}
</style>
<div>
   <table>
      <tr>
         <td>Price</td>
         <td>20</td>
      </tr>
      <tr>
         <td>Tax</td>
         <td>1.34</td>
      </tr>
      <tr>
         <td>Total</td>
         <td>21.34</td>
      </tr>
   </table>
   <div class="disclaimer">
      <span>This is a disclaimer regarding purchases, tax, and the like...</span>
   </div>
</div>

Here the table and the disclaimer are included in a div element classed as “price-section”. The table is created as usual and then the disclaimer is created. The disclaimer consists of a div element classed as “disclaimer” with an inner span element containing the disclaimer text. The only style applied here is for .disclaimer where a float:        right; style is used. This accomplishes the basic need for the disclaimer to display towards the right side of the page. Though, it is also displaying below the table. Fortunately, there is a very simple solution!

Attempt #2 – Success!

When Joe first wrote his styling and HTML, he was thinking of the left-to-right (LTR) reading direction which is only natural. The issue with this is there is nothing natural about this page. Below is the revised version of his markup:

<style type="text/css">
.disclaimer
{
   float: right;
}
</style>
<div>
   <div class="disclaimer">
      <span>This is a disclaimer regarding purchases, tax, and the like...</span>
   </div>
   <table>
      <tr>
         <td>Price</td>
         <td>20</td>
      </tr>
      <tr>
         <td>Tax</td>
         <td>1.34</td>
      </tr>
      <tr>
         <td>Total</td>
         <td>21.34</td>
      </tr>
   </table>
</div>

The table and the disclaimer are included in a div element like before. The difference is the disclaimer is created before the table! This conflicts with the normal translation between the LTR reading direction and the hierarchical flow of markup but it has everything to do with how a browser renders the markup and applying the float: right; style.

As you can see in the screenshot below, the previous markup produces the expected results:

Price	20
Tax	1.34
Total	21.34

This is a disclaimer regarding purchases,
tax, and the like…

Conclusion

As mentioned in the beginning of this post, there is more to styles in web development than .class and #id. In this case, the order of the elements in Joe’s HTML document directly impacted the results of the CSS applied. Keep this in mind when you are having “styling” issues.