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.