CSS banner image.

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.

See the Pen Untitled by David Fox (@foxbeefly) on CodePen.

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.

HTML web page without the clear attribute.HTML web page with the clear attribute.

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:

See the Pen Image align clear by David Fox (@foxbeefly) on CodePen.

By MisterFoxOnline

CAT Educator

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.