It is often the case that as you progress from the most basic web development skills, it appears that the solution to one problem often creates a new problem. Such is the case when we start using HTML’s align attribute on an image to wrap text. If you open the below Codepen and view it full screen you will see that the end result is far from satisfactory.
This is because the
align attribute removes an element from the normal flow of the entire page (not just the container element), it will float to the left of all the text, even block-level elements like
<h1>. You can see proof of this in the code: even using the block level <article> tags does not solve the problem as one might expect.
In the example below, the images have been floated to the right of the text. In the “Before” image, we want the “King Protea” heading to be below the picture of the sugarbush and not next to it. We only want text/information about the Sugarbush to be next to (“wrapped”) the left of the Sugarbush image.
To prevent this from happening, we use CSS’s
clear attribute on the headings to ensure that the heading clears the element that is floating to its right.
The above is achieved by creating a CSS rule to apply the clear attribute using h2 as the selector. This can be achieved using inline CSS style as below, or in an external stylesheet as in the Codepen that follows:
<h2 style="clear: right;">Broad-leaved Sugarbush</h2>
Play in the Codepen below to test the various options: