Floating More Than One HTML Element on a Line

Introduction
In many cases you would want to float just one element to the right end or left end of a line. There may be times when you would want to float two or more elements on a line to the right or left. I show you a convenient way to do that in this article.

You need basic knowledge in HTML and CSS in order to understand this article.

Note: If you cannot see the code or if you think anything is missing in this article (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Experiment
Let us assume that you have three SPAN elements and you want to float them in the other in which they were typed. In one case you want to float them to the right and in another case, you want to float them to the left. Try the following two code samples. The first one is to float them to the right and the second one is to float them to the left. You expect the three SPAN elements to be displayed at the browser in the order in which they were typed.

Some text.
SPAN 1 SPAN 2 SPAN 3
Some text

The second code sample:

Some text.
SPAN 1 SPAN 2 SPAN3
Some text

Result
For the first code the SPAN elements appeared in the wrong and opposite order. For the second code the SPAN elements appeared in the right order. We conclude that when you want to float more than one element to the right, in a line, if each of the elements has its own CSS "float:right" property/value pair, then the elements will be floated in the opposite order.

Solution
The solution is to put all the elements in one containing element, and float only the containing element to the right. The next question is which element do we choose? A good element is the HTML Object element. The Object element is an element for arbitrary use. Whenever you want an element that is not in the HTML specification, you have to make one with the OBJECT element. The Object element is a complex element, but for our purpose, you use it in a simple way.

The Object element is an inline element by default. It has a start and end tag. You simply make the content of the Object element, the elements you want floated. The order in which you type the elements is the order in which they will appear floated right. The following code illustrates this:

object {float:right}

Some text.
SPAN 1 SPAN 2 SPAN 3
Some text

Try the above code. It is the Object element that is floated, not the individual SPAN elements.

You are now in the position to float more than one element in a line conveniently.

Chrys