CSS Floating

Consider the following problem and think on how can you solve it from the concepts learnt so far, or can you even solve it!

So the problem is that in the following div container we want the image to be positioned to the right in such a way that the text runs with it.

<p>
    This is some text written to make this text long enough so that this text can contain the image <img src="/static/images/nav.png" /> within it. With a short text we won't be able to demostrate how floating works in its basics. Therefore let's write some more text to again make this text longer.
</p>

Initially the output looks like this:

This is some text written to make this text long enough so that this text can contain the image within it. With a short text we won't be able to demostrate how floating works in its basics. Therefore let's write some more text to again make this text longer.

But we want it like this:

This is some text written to make this text long enough so that this text can contain the image within it. With a short text we won't be able to demostrate how floating works in its basics. Therefore let's write some more text to again make this text longer.

So in light of the concepts that you've learnt uptil this stage in CSS Layout can you think of any way to get to the desired output and solve this problem.

Talking about the CSS display property, it just specifies how an element will be displayed on the HTML page and consequently has no use in this case.

Left with the position property let's also filter the choices that we can within it.

1. Starting with static which is the default for all HTML elements, we can't move elements using it and therefore it goes straight away into the useless list without any further discussion.
2. relative does allow movement of elements, unlike static, but we can't really directly specify a position to it to get the element to the right side. Furthermore moving a relative element would create a hole in its default position - into the useless list too.
3. fixed is of absolutely no use since we don't want any fix positioning to be there in our layout.
4. Left with absolute, we can position the image in the place we desire (the right end), but we can't get the text to appear as it does in the example above. It would appear as follows.

This is some text written to make this text long enough so that this text can contain the image within it. With a short text we won't be able to demostrate how floating works in its basics. Therefore let's write some more text to again make this text longer.

As you can see in this example, the text goes behind the image, whereas we wanted it to flow together with the image and thus it turns out that at least using CSS position we can't solve the problem above in any way.

And now to the solution: we can solve this problem very easily using what is known as CSS floating.

Read this definition slowly and carefully, and try to understand what it means.

Two things to take special note in the definition above are:

1. Floating can be done in the left or right ends ONLY.
2. An element floated has its area considered in the occupied space of its parent. What this means is that floating elements take space as do normal elements within their container. This is just the opposite of what happens with absolute elements - their area isn't considered in the occupied area as in the example above - they appear absolutely.

The second point isn't anything special, but just a technical way to describe how floated elements behave inside their parents.

To float elements in CSS we have the float property that can take the following values:

1. left: float the element to the left side
2. right: float the element to the right side
3. none: remove any floating

So now that we know a little bit about what is floating we can move over to actually seeing how it works.

We'll start by considering the first example given at the beginning of this chapter. This time we have reduced the width of the image to make it more contained within the text. This is just to make you understand it even better.

This is some text written to make this text long enough so that this text can contain the image within it. With a short text we won't be able to demostrate how floating works in its basics. Therefore let's write some more text to again make this text longer.

Now take a note of the line where the image appears in your device. If it appears in the second line, write it; if third then also write it.

Now with this denoted, we'll float the image to the right using float: right:

img {
    float: right;
}

And we see that the image goes to right end of the line where it was originally positioned.

This is some text written to make this text long enough so that this text can contain the image within it. With a short text we won't be able to demostrate how floating works in its basics. Therefore let's write some more text to again make this text longer.

In our case, it was originally in the first line and hence floated to the right side of the first line. Differentiating between which line the image is in, can be difficult in this case since the height of the image is way more than that of the text.

Try increasing the font size or shrinking the image and testifying whether the image floats in the line it originally was! Go ahead and float around some stuff!

There isn't any limitation to the number of elements we can float within a container.

We can perfectly float any number of elements within a container and they will be positioned just the way floated elements would - left would go to the left of their lines, and right would go to the right. Let's recall this using some examples.

Elements on different lines

Here we have two images on two different lines always, which if we float, would be placed at different positions in the vertical axis:

This is some text written to make this text long enough so that this text can contain the image within it. With a short text we won't be able to demostrate how floating works in its basics. Therefore let's write some more text to again make this text longer.

And now floating both these images to the right gives just what we predicted:

This is some text written to make this text long enough so that this text can contain the image within it. With a short text we won't be able to demostrate how floating works in its basics. Therefore let's write some more text to again make this text longer.

Elements on the same line

In contrast to what we've just shown, there is an equal likelihood that two elements, to be floated, can appear in the same line of the HTML document.

And when this happens we have to determine what will be floated first.

Since interpretation goes left→right and top→down (just how we normally read text - nothing new!) it follows that the first elements appearing in the markup are floated first. The first element is floated to the desired position, then the second one and so on.

Furthermore the elements float right next to each other.

There isn't really anything at all difficult in this, unless you don't see and work with an example:

Notice the order of the images in the following HTML.

<div>
    <span>This is some text written to make this text long enough so that this text can contain the image</span>
    <img src="/images/nav.png" />
    <img src="/images/think.png" />
    <span>within it. With a short text we won't be able to demonstrate how floating works in its basics. Therefore let's write some more text to again make this text longer.</span>
</div>

img {
    float: right;
    width: 40px;
}

Now when we float both images to the right something similar to this happens:

1. The interpreter encounters the first image, floats it on the right side of its line and moves on.
2. The interpreter encounters another image, floats it again to the right but this time since the extreme right side was already occupied by an image, this image is floated to the right before the first image.

This is some text written to make this text long enough so that this text can contain the image within it. With a short text we won't be able to demonstrate how floating works in its basics. Therefore let's write some more text to again make this text longer.

Floating is definitely a handy property in many cases but at the same time problematic too. It can cause some serious unexpected layout issues if not understood carefully. So let's examine it in detail. Follow along carefully and gradually.

When we float an element within its parent, the parent considers the element to have occupied some space within it i.e any other content can't come within that space. And you know this by now. However the problem is that parent doesn't extend to cover up its floated child (if it overflows). Let's see what this means

img {
    float: right;
    width: 40px;
}