Interface Experiences: Float Right CSS!

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.

Advertisements

2 thoughts on “Interface Experiences: Float Right CSS!

    • I had to do some things with the post to get the HTML to work in a browser. This happens to be incompatible with emails and apparently windows phones. To make this compatible with the various browsers, email clients, and mobile devices is another post in itself. Thank you for letting me know of your experience.

      Like

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s